摘要：是一個(gè)構(gòu)建工具，基于的平臺(tái)運(yùn)行，使用的是的模塊化語(yǔ)法。我們使用需要用到的包一個(gè)任務(wù)，對(duì)應(yīng)一個(gè)包，對(duì)應(yīng)一個(gè)處理邏輯對(duì)應(yīng)的是同步任務(wù)，從左到右，依次執(zhí)行任務(wù)。時(shí)間長(zhǎng)對(duì)應(yīng)的是異步任務(wù)，效率高，時(shí)間短。

gulp 是一個(gè)構(gòu)建工具，基于Node.js的平臺(tái)運(yùn)行，使用的是commonJs的模塊化語(yǔ)法。

我們使用gulp需要用到的包

一個(gè)TASK任務(wù)，對(duì)應(yīng)一個(gè)包，對(duì)應(yīng)一個(gè)處理邏輯、

gulp.series對(duì)應(yīng)的是同步任務(wù)，從左到右，依次執(zhí)行任務(wù)。時(shí)間長(zhǎng)

gulp.parallel對(duì)應(yīng)的是異步任務(wù)，效率高，時(shí)間短。

gulp.src 表明文件從哪里讀取

gulp.dest 表明文件輸出到哪

const gulp = require("gulp");   //gulp的包 
const eslint = require("gulp-eslint"); //eslint的包  語(yǔ)法檢查 
const babel = require("gulp-babel");      //編譯ES語(yǔ)法的babel包 
const browserify = require("gulp-browserify");  //編譯commonJs語(yǔ)法的工具
const rename = require("gulp-rename");    //重命名文件的包
const less = require("gulp-less");   // 識(shí)別less文件的gulp的包
const livereload = require("gulp-livereload");   //監(jiān)控文件的包
const connect = require("gulp-connect");    // 熱更新的包
const open = require("open");   //打開(kāi)網(wǎng)頁(yè)的包
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識(shí)別的包
const cssmin = require("gulp-cssmin");  //壓縮CSS的包
const concat = require("gulp-concat");   //合并文件的包 
const htmlmin = require("gulp-htmlmin");  //壓縮HTML的包 


// 注冊(cè)任務(wù)
/*
  開(kāi)發(fā)套路：
    1. 去https://gulpjs.com/plugins/搜相關(guān)的插件  gulp-xxx
    2. 打開(kāi)插件的npm倉(cāng)庫(kù) 看文檔使用
    3. 下載并引入gulp插件
    4. 配置插件任務(wù)
 */

// 語(yǔ)法檢查  必須有一個(gè)eslint的配置文件
gulp.task("eslint", function () {
  // 讀取所有的js文件， 返回值就是一個(gè)可讀流
  return gulp.src(["src/js/*.js"])
    // 對(duì)流中的文件/數(shù)據(jù)進(jìn)行語(yǔ)法檢查
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(livereload());
})

// 語(yǔ)法轉(zhuǎn)換
// babel能將es6模塊化語(yǔ)法轉(zhuǎn)換為commonjs模塊化語(yǔ)法
// 能將es6及其以上的語(yǔ)法轉(zhuǎn)換為es5及其以下的語(yǔ)法
gulp.task("babel", () =>
  // 讀取所有js文件
  gulp.src("src/js/*.js")
    // 進(jìn)行語(yǔ)法轉(zhuǎn)換
    .pipe(babel({
      presets: ["@babel/preset-env"] //此處需要修改，官網(wǎng)有誤
    }))
    // 輸出出去
    .pipe(gulp.dest("build/js"))
    .pipe(livereload())
);

// 將commonjs的模塊化語(yǔ)法轉(zhuǎn)換成瀏覽器能識(shí)別語(yǔ)法
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"));
});

// 自動(dòng)化 --> 自動(dòng)編譯  --> 自動(dòng)刷新瀏覽器（熱更新） --> 自動(dòng)打開(kāi)瀏覽器
gulp.task("watch", function() {
  livereload.listen();
  // 開(kāi)啟服務(wù)器
  connect.server({
    name: "Dev App",
    root: ["build"],
    port: 3000,
    livereload: true  //熱更新
  });
  // 打開(kāi)瀏覽器
  open("http://localhost:3000");
  
  // 監(jiān)視指定文件，一旦文件發(fā)生變化，就執(zhí)行后面的任務(wù)
  gulp.watch("src/less/*.less", gulp.series("less"));
  gulp.watch("src/js/*.js", gulp.series("js-dev"));
});

// 配置默認(rèn)任務(wù) --> 執(zhí)行以上多個(gè)任務(wù)
gulp.task("js-dev", gulp.series("eslint", "babel", "browserify")); // 同步順序執(zhí)行，同一時(shí)間只能執(zhí)行一個(gè)任務(wù)  速度慢
gulp.task("js-prod", gulp.series("js-dev", "uglify"));
// gulp.task("default", gulp.parallel("eslint", "babel", "browserify")); // 異步執(zhí)行，同一時(shí)間執(zhí)行多個(gè)任務(wù)   速度快
gulp.task("build", gulp.parallel("js-dev", "less"));
// 生產(chǎn)環(huán)境的指令: gulp prod
gulp.task("prod", gulp.parallel("js-prod", "css", "html"));
// 開(kāi)發(fā)環(huán)境的指令： gulp start
gulp.task("start", gulp.series("build", "watch"));

上面包括了基本上所有g(shù)ulp工程化所需要的包的使用方法和注釋?zhuān)矚g的朋友希望你收藏！