摘要：以及列出的是本妹子最常用的插件，小伙伴們可以參考。案例地址二解決瀏覽器緩存問題為靜態文件添加唯一值，如。我們主要是用將轉換成可以在瀏覽器中運行的代碼。合并文件相關預處理器。

有些簡單前端小項目，不需要涉及框架，前端打包壓縮的話本妹子還是喜歡用gulp。
本文將用gulp-rev和gulp-rev-rewrite解決cdn緩存問題。
以及列出的是本妹子最常用的gulp插件，小伙伴們可以參考。
案例地址：https://github.com/raoenhui/g...

1.為靜態文件添加唯一hash值，如 unicorn.css → unicorn-d41d8cd98f.css。

2.生成map映射文件，方便后面html更換文件名

gulp.task("js", () =>
    gulp.src(["./src/app.js", "./src/app2.js"])
        .pipe(gulp.dest("dist")) // 將源文件拷貝到打包目錄
        .pipe(rev())  
        .pipe(gulp.dest("dist")) // 將生成的hash文件添加到打包目錄
        .pipe(rev.manifest("js-rev.json"))
        .pipe(gulp.dest("dist")) // 將map映射文件添加到打包目錄
);

gulp.task("css",()=> {
    gulp.src("./src/*.css")
        .pipe(gulp.dest("dist")) // 將生成的hash文件添加到打包目錄
        .pipe(rev())
        .pipe(gulp.dest("dist"))// write rev"d assets to build dir
        .pipe(rev.manifest("css-rev.json"))
        .pipe(gulp.dest("dist"))   // 將map映射文件添加到打包目錄

});

根據rev生成的manifest.json map映射文件, 去替換html文件中的引用名稱,

gulp.task("html", () => {
  const jsManifest = gulp.src("dist/js-rev.json"); //獲取js映射文件
  const cssManifest = gulp.src("dist/css-rev.json"); //獲取css映射文件
  return gulp.src("./*.html")
    .pipe(revRewrite({manifest: jsManifest})) // 把引用的js替換成有版本號的名字
    .pipe(revRewrite({manifest: cssManifest})) // 把引用的css替換成有版本號的名字
    .pipe(gulp.dest("dist"))
});

替換成功

babel是一個 JavaScript 編譯器。我們主要是用將ES6轉換成可以在瀏覽器中運行的代碼。而gulp-babel 的用法、功能和babel 是一樣的。
先運行 npm install --save-dev gulp-babel @babel/core @babel/preset-env @babel/plugin-transform-runtime，裝好babel。

const babel = require("gulp-babel");
gulp.task("js", () =>
    gulp.src("src/app.js")
        .pipe(babel({
            presets: ["@babel/env"], 
            plugins: ["@babel/transform-runtime"]
        }))
        .pipe(gulp.dest("dist"))
);

找到編譯源文件，方便調試源碼。

const sourcemaps = require("gulp-sourcemaps");
gulp.task("js", () =>
    gulp.src("src/app.js")
    .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ["@babel/env"], 
            plugins: ["@babel/transform-runtime"]
        }))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("dist"))
);

合并js文件

const concat = require("gulp-concat");
gulp.task("js", function() {
  return gulp.src(["./src/app.js", "./src/app2.js"])
    .pipe(concat("app.js"))
    .pipe(gulp.dest("dist"));
});             

CSS預處理器。

const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer"); //添加css兼容性寫法
gulp.task("css", function () {
    return gulp.src("./src/*.css")
        .pipe(postcss([ autoprefixer({
            browsers: [
                ">1%",
                "last 4 versions",
                "Firefox ESR",
                "not ie < 9", 
                "iOS >= 8",
                "Android > 4.4"
            ],
            flexbox: "no-2009",
        }) ]))
        .pipe(gulp.dest("./dest"));
});

壓縮CSS

const cleanCSS = require("gulp-clean-css");
gulp.task("css", () => {
  return gulp.src("styles/*.css")
    .pipe(cleanCSS({compatibility: "ie8"}))
    .pipe(gulp.dest("dist"));
});

將引用的js、css文件，插入html中，變成內聯式引用。

const inlinesource = require("gulp-inline-source");
gulp.task("html", function () {
    return gulp.src("./*.html")
        .pipe(inlinesource({
           compress: false     //是否壓縮成一行，默認為true壓縮
         }))
        .pipe(gulp.dest("./out"));
});

壓縮html

const htmlmin = require("gulp-htmlmin");
gulp.task("minify", () => {
  return gulp.src("src/*.html")
    .pipe(htmlmin({
                removeComments: true,  //去除備注
                collapseWhitespace: true //去除空白
              }))
    .pipe(gulp.dest("dist"));
});    

刪除文件或文件夾

const del = require("del");
/* 清理一些不是必須的js，css文件 */
gulp.task("clean", function() {
    return del(["./dist/*.js",
        "./dist/*.css"
    ]).then(function() {
        console.log("delete unnecessary files for firecrackers");
    });
});

重命名文件

const rename = require("gulp-rename");
gulp.task("html", function() {
.pipe(rename({
    dirname: ".",                // 路徑名
    basename: "index",            // 主文件名
    prefix: "pre-",                 // 前綴
    suffix: "-min",                 // 后綴
    extname: ".html"                // 擴展名
  }))
.pipe(gulp.dest("dist"))
});

案例地址：https://github.com/raoenhui/gulpExample.git

原文地址：https://raoenhui.github.io/js/2019/03/03/gulp

Happy coding .. :)