前端工程化篇之 Gulp

摘要：是一个构建工具，基于的平台运行，使用的是的模块化语法。我们使用需要用到的包一个任务，对应一个包，对应一个处理逻辑对应的是同步任务，从左到右，依次执行任务。时间长对应的是异步任务，效率高，时间短。

gulp 是一个构建工具，基于Node.js的平台运行，使用的是commonJs的模块化语法。

我们使用gulp需要用到的包

一个TASK任务，对应一个包，对应一个处理逻辑、

gulp.series对应的是同步任务，从左到右，依次执行任务。时间长

gulp.parallel对应的是异步任务，效率高，时间短。

gulp.src 表明文件从哪里读取

gulp.dest 表明文件输出到哪

const gulp = require("gulp");   //gulp的包 
const eslint = require("gulp-eslint"); //eslint的包  语法检查 
const babel = require("gulp-babel");      //编译ES语法的babel包 
const browserify = require("gulp-browserify");  //编译commonJs语法的工具
const rename = require("gulp-rename");    //重命名文件的包
const less = require("gulp-less");   // 识别less文件的gulp的包
const livereload = require("gulp-livereload");   //监控文件的包
const connect = require("gulp-connect");    // 热更新的包
const open = require("open");   //打开网页的包
const uglify = require("gulp-uglify");   //压缩JS代码的包
const LessAutoprefix = require("less-plugin-autoprefix"); //将LESS文件混合的插件包
// https://github.com/browserslist/browserslist   
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] });  //拓展CSS识别的包
const cssmin = require("gulp-cssmin");  //压缩CSS的包
const concat = require("gulp-concat");   //合并文件的包 
const htmlmin = require("gulp-htmlmin");  //压缩HTML的包 


// 注册任务
/*
  开发套路：
    1. 去https://gulpjs.com/plugins/搜相关的插件  gulp-xxx
    2. 打开插件的npm仓库 看文档使用
    3. 下载并引入gulp插件
    4. 配置插件任务
 */

// 语法检查  必须有一个eslint的配置文件
gulp.task("eslint", function () {
  // 读取所有的js文件， 返回值就是一个可读流
  return gulp.src(["src/js/*.js"])
    // 对流中的文件/数据进行语法检查
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(livereload());
})

// 语法转换
// babel能将es6模块化语法转换为commonjs模块化语法
// 能将es6及其以上的语法转换为es5及其以下的语法
gulp.task("babel", () =>
  // 读取所有js文件
  gulp.src("src/js/*.js")
    // 进行语法转换
    .pipe(babel({
      presets: ["@babel/preset-env"] //此处需要修改，官网有误
    }))
    // 输出出去
    .pipe(gulp.dest("build/js"))
    .pipe(livereload())
);

// 将commonjs的模块化语法转换成浏览器能识别语法
gulp.task("browserify", function() {
  // 只要放入口文件
  return gulp.src("build/js/app.js")
    .pipe(browserify())
    // 重命名文件
    .pipe(rename("built.js"))
    .pipe(gulp.dest("build/js"))
    .pipe(livereload());
});

// 压缩js代码
gulp.task("uglify", function () {
  return gulp.src("./build/js/built.js")
    .pipe(uglify())
    .pipe(rename("dist.min.js"))
    .pipe(gulp.dest("dist/js"))
})

// 将less编译成css
gulp.task("less", function () {
  return gulp.src("./src/less/*.less")
    .pipe(less())
    .pipe(gulp.dest("./build/css"))
    .pipe(livereload());
});

// 压缩css
gulp.task("css", function () {
  return gulp.src("./src/less/*.less")
    .pipe(concat("dist.min.css"))
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(cssmin())
    .pipe(gulp.dest("./dist/css"))
});

// 压缩html
gulp.task("html", () => {
  return gulp.src("src/*.html")
    .pipe(htmlmin({
      collapseWhitespace: true, // 去除空格
      removeComments: true // 去掉注释
    }))
    .pipe(gulp.dest("dist"));
});

// 自动化 --> 自动编译  --> 自动刷新浏览器（热更新） --> 自动打开浏览器
gulp.task("watch", function() {
  livereload.listen();
  // 开启服务器
  connect.server({
    name: "Dev App",
    root: ["build"],
    port: 3000,
    livereload: true  //热更新
  });
  // 打开浏览器
  open("http://localhost:3000");
  
  // 监视指定文件，一旦文件发生变化，就执行后面的任务
  gulp.watch("src/less/*.less", gulp.series("less"));
  gulp.watch("src/js/*.js", gulp.series("js-dev"));
});

// 配置默认任务 --> 执行以上多个任务
gulp.task("js-dev", gulp.series("eslint", "babel", "browserify")); // 同步顺序执行，同一时间只能执行一个任务  速度慢
gulp.task("js-prod", gulp.series("js-dev", "uglify"));
// gulp.task("default", gulp.parallel("eslint", "babel", "browserify")); // 异步执行，同一时间执行多个任务   速度快
gulp.task("build", gulp.parallel("js-dev", "less"));
// 生产环境的指令: gulp prod
gulp.task("prod", gulp.parallel("js-prod", "css", "html"));
// 开发环境的指令： gulp start
gulp.task("start", gulp.series("build", "watch"));

上面包括了基本上所有gulp工程化所需要的包的使用方法和注释，喜欢的朋友希望你收藏！