小米商城day01

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

html 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何在小米商城项目中使用npm初始化，接着详细讲述了如何配置和使用gulp，包括gulp-scss、gulp-minify-css和gulp-rename等插件。作者还讲解了如何编写相关任务来构建项目，并设置了监听任务以实现实时刷新功能，确保在服务器环境下能即时看到代码变更效果。

1 npm --init
2 相关插件 gulp gulp-scss gulp-minify-css gulp-rename

npm install gulp@3.9.1 -D
npm i gulp-scss gulp-minify-css gulp-rename -D
npm i gulp-sass -D  //有的环境不支持gulp-scss

3 编写相关任务并初步建立项目

const gulp = require("gulp");
// const scss = require("gulp-scss");
const scss = require("gulp-sass");
const minifyCSS = require("gulp-minify-css");
const rename = require("gulp-rename");
/* 文件压缩 .scss文件-->  css文件  -->  压缩  -->  min.css */
// 重命名需要指定名字
gulp.task("scss", function () {
    return gulp.src("stylesheet/index.scss")
        .pipe(scss())
        .pipe(gulp.dest("dist/css"))
        .pipe(minifyCSS())
        .pipe(rename("index.min.scss"))
        .pipe(gulp.dest("dist/css"));
})
gulp.task("scssAll", function () {
    return gulp.src("stylesheet/*.scss")
        .pipe(scss())
        .pipe(gulp.dest("dist/css"));
})
// js文件
gulp.task("scripts", function () {
    return gulp.src(["*.js", "!gulpfile.js"])
        .pipe(gulp.dest("dist/js"));
})
// html文件
gulp.task("copy_html", function () {
    return gulp.src("*.html")
        .pipe(gulp.dest("dist"));
})

//处理静态数据json
gulp.task("data", function () {
    return gulp.src(["*.json", "!package.json"])
        .pipe(gulp.dest("dist/data"));
})

// 图片文件
gulp.task("images", function () {
    return gulp.src("images/**/*")
        .pipe(gulp.dest("dist/images"));
})

// 一次性处理多个task

gulp.task("build", ["scss", "scssAll", "scripts", "copy_html", "data", "images"], function () {
    console.log("项目建立成功");
})

gulp build  //将项目内容生成目标文件dist

3 建立任务监听

	gulp.task("watch", function () {
	    gulp.watch("stylesheet/index.scss", ["scss"]);
	    gulp.watch("stylesheet/*.scss", ["scssAll"]);
	    gulp.watch("*.js", ["scripts"]);
	    gulp.watch("*.html", ["copy_html"]);
	    gulp.watch("*.json", ["data"]);
	    gulp.watch("images/**/*", ["images"]);
	})

3 服务器 :实现服务器下的实时刷新

npm i gulp-connect -D

const connect = require("gulp-connect");
gulp.task("server", function () {
    connect.server({
        root: "dist",
        port: 8899,//0-25535之间的数
        livereload: true,//实时刷新，需要给其他方法添加.pipe(connect.reload())
    })
})

// 启动默认任务gulp：监听+服务器
gulp.task("default", ["watch", "server"]);

gulp  //npm环境