摘要：是一個構建工具，基于的平臺運行，使用的是的模塊化語法。我們使用需要用到的包一個任務，對應一個包，對應一個處理邏輯對應的是同步任務，從左到右，依次執行任務。時間長對應的是異步任務，效率高，時間短。

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工程化所需要的包的使用方法和注釋，喜歡的朋友希望你收藏！