Gulp 代码合并demo

1、Sass转换
2、执行多任务
3、代码合并
4、监听文件

gulpfile.js

// 处理任务
// 在全局安装和在项目内安装了gulp后，引入gulp模块
var gulp = require("gulp");
// 在项目内安装了gulp-imagemin模块后引入该模块
var imagemin = require("gulp-imagemin");
// 压缩js文件，需要引入的uglify模块
var uglify = require("gulp-uglify");
// sass转换为css
var sass = require("gulp-sass"); //依赖node-sass，即在使用gulp-sass前要安装node-sass  友情提示：在安装这些插件时最好使用cnpm 安装，因为用npm的话有可能会安装失败。 ！！！在执行gulp时最好注意一个gulp的版本是多少
// 合并代码
var concat = require("gulp-concat");

/**
 * gulp.task  --定义任务
 * gulp.src   --找到需要执行任务的文件
 * gulp.dest  --执行任务的文件的去处
 * gulp.watch --观察文件是否发生变化
 */

//  定义任务
gulp.task("message", function() {
    // message是任务名字，可随便写
    return console.log(
        "Gulp is running! 执行message任务时，在终端输入命令：gulp message 即可"
    );
});
// 执行任务 在终端输入命令：gulp message

// 拷贝文件
gulp.task("copyHtml", function() {
    // * 号表示 所有文件  要想拷贝单个文件，直接写文件名.后缀名即可
    // pipe 表示 拿到pipe左边的文件 输出 到pipe括号里的具体路径
    // dist 表示要新建的一个文件夹，不用手动创建；dist名字可随便起
    gulp.src("src/*.html")
        .pipe(gulp.dest("dist"));
});

// 图片压缩
// 在项目内安装gulp-imagemin，在终端输入命令：npm install gulp-imagemin --save-dev
gulp.task("imageMin", function() {
    gulp.src("src/images/*")
        .pipe(imagemin())
        .pipe(gulp.dest("dist/images")); //压缩所有文件 第一个pipe括号中方法名要和引入gulp-imagemin模块的声明的变量名一致
});

// 压缩js
/* gulp.task("minify", function() {
    gulp.src("src/js/*.js")
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"));
}); */

// sass 转换为css
gulp.task("sass", function() {
    gulp.src("src/sass/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("dist/css"));
});

// 合并代码
gulp.task("scripts", function() {
    gulp.src("src/js/*.js")
        .pipe(concat("main.js"))
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"));
});

// 监听文件是否发生变化 当文件发生变化时，dist文件夹中响应的文件代码也会跟着变化
gulp.task("watch", function() {
    gulp.watch("src/js/*.js", gulp.series('scripts'));
    gulp.watch("src/images/*", gulp.series('imageMin'));
    gulp.watch("src/sass/*.scss", gulp.series('sass'));
    gulp.watch("src/*.html", gulp.series('copyHtml'));
})

// 定义默认任务 执行多个任务
// gulp3 版本
// gulp.task("default", ["message", "copyHtml", "imageMin", "minify", "sass"]);

// gulp4 版本  本项目gulp版本为4.0.2
// gulp.series: 顺序执行
// gulp.parallel：并行计算 
// gulp.task("default", gulp.series("message",gulp.parallel("copyHtml", "imageMin", "minify", "sass")));
gulp.task("default", gulp.parallel("message", "copyHtml", "imageMin", "scripts", "sass"));