关于gulp:从实战带你认识gulp打包前端项目并实现防缓存

gulp是什么？

一个基于node的前端自动化工作构建工具，应用经典回调+链式调用的形式实现工作的自动化 (src.pipe(...).pipe)，gulp其实和webpack很类似，然而gulp侧重点不同，gulp更偏重前端流程自动化、工作执行（通过工作使开发提效），就像一条流水线。而webpack则是更偏重用于打包前端资源，所有皆可打包成模块。
官网文档：https://www.gulpjs.com.cn/

gulp的利用场景？为什么用gulp？

1.构建前端自动化流程比拟好的计划，一些反复的人工操作能够让gulp去做，并且代码量不大，晋升开发效率(自动化实现前端工作流工作：单元测试、优化、打包)。

2.与其余构建工具相比开发简略，易上手。基于nodejs 文件系统流，运行速度快。

3.更适宜原生前端我的项目的打包。有助于了解前端工程化。

4.公布通用型组件或者npm库的时候能够用gulp来进行打包。

gulp的装置

在你的我的项目目录中执行

npm install -g gulp

在根目录下创立gulp的配置文件gulpfile.js，install一下文件中的依赖，之后就能够间接在这个文件中定义咱们的gulp工作了

var gulp=require("gulp");//引入gulp模块
gulp.task('default',function(){ 
 console.log('hello world');
});

而后间接终端中进入当前目录运行 gulp 命令就开始执行工作了。
gulp前面也能够加上要执行的工作名，例如gulp task1，如果没有指定工作名，则会执行工作名为default的默认工作。
gulp罕用的几个api ： task, series, parallel, src, pipe, dest

task: 创立一个工作
series：程序执行多个工作
prallel：并行执行多个工作
src：读取数据源转换成stream
pipe：管道-能够在两头对数据流进行解决
dest：输入数据流到指标门路

gulp理论利用之原生前端我的项目打包：

以一个jQuery原生我的项目为例子，目录构造：

门路表：
因为我的项目构造有点非凡，资源比拟扩散，html的js、css保留在对应模块文件夹中。而公共的js、css却在html的里面的文件中，所以就设置了2个入口（以js资源为例）：一个根目录入口、一个html入口

  scriptsjs: {//根目录入口
    src: [
      "./temp/js/**/*.js",//temp/js/之下的所有文件夹下的js
      "!./temp/**/*.min.js", //不匹配压缩过的js，避免二次压缩
      "!./temp/js/common.js", 
      "!./temp/mpcc/**/*.js",//这个文件不须要压缩解决所以不匹配
    ],
    dest: destDir + "/js",//进口
  },
  scriptshtml: {//html入口
    src: [
      "./temp/html/**/*.js",
      "!./temp/html/BasicSet/RoleManage/js/*.js",//不匹配
      "!./temp/html/BasicSet/UserAuthorization/js/*.js",
    ],
    dest: destDir + "/html",
  },

你没看错，是不是有点像webpack中的entry和output。* 通配符是代表所有文件夹、！是代表不匹配。这里能够本人选哪些文件不须要进行匹配

gulpfile.js 残缺代码：

var gulp = require("gulp"),
  sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var uglify = require("gulp-uglify");
var del = require("del");
var minifycss = require("gulp-minify-css");
var through = require("through2");
var path = require("path");
var fs = require("fs");
var crypto = require("crypto");
var ramdomHash = function (len) {
  //获取随机hash值
  var random = Math.random().toString();
  return crypto
    .createHash("md5")
    .update(new Date().valueOf().toString() + random) //退出工夫戳和随机数保障hash的惟一
    .digest("hex")
    .substr(0, len);
};
var destDir = "workOrder"; //生产包文件目录
//包门路表
var paths = {
  stylescss: {
    src: ["./temp/css/**/*.css", "!./temp/**/*.min.css"],
    dest: destDir + "/css",
  },
  styleshtml: {
    src: ["./temp/html/**/*.css", "!./temp/**/*.min.css"],
    dest: destDir + "/html",
  },
  scripts: {
    src: "./temp/**/*.js",
    dest: destDir + "/",
  },
  scriptsjs: {
    src: [
      "./temp/js/**/*.js",
      "!./temp/**/*.min.js",
      "!./temp/js/common.js",
      "!./temp/mpcc/**/*.js",
    ],
    dest: destDir + "/js",
  },
  scriptshtml: {
    src: [
      "./temp/html/**/*.js",
      "!./temp/html/BasicSet/RoleManage/js/*.js",
      "!./temp/html/BasicSet/UserAuthorization/js/*.js",
    ],
    dest: destDir + "/html",
  },
  html: {
    src: "./temp/**/*.html",
    dest: destDir + "/",
  }
};
//删除生产包
function clean() {
  return del([destDir]);
}
//革除temp文件夹
function revClean() {
  return del(["temp"]);
}
//复制到temp，防止净化src
function revCopy() {
  return gulp
    .src("./workorder_dev/**/*", { base: "./workorder_dev" })
    .pipe(gulp.dest("./temp/"));
}
//html中资源门路加版本号，更改所有的文件里的资源门路，以便接下来的减少版本号工作.
function revHtmlPathReplace() {
  var ASSET_REG = {
    SCRIPT:
      /("|')(.[^('|")]*((\.js)|(\.css)|(\.json)|(\.png)|(\.jpg)|(\.ttf)|(\.eot)|(\.gif)|(\.woff2)|(\.woff)))(\1)/gi,
  };
  return gulp
    .src("./temp/html/**/*.html")
    .pipe(
      (function () { //利用through读取html文件夹下的所有html文件
        return through.obj(function (file, enc, cb) {
          if (file.isNull()) {
            this.push(file);
            return cb();
          }
          if (file.isStream()) {
            this.emit(
              "error",
              new gutil.PluginError(PLUGIN_NAME, "Streaming not supported")
            );
            return cb();
          }

          var content = file.contents.toString();

          var filePath = path.dirname(file.path);
             for (var type in ASSET_REG) { //获取html文件内容间接应用replace+正则进行替换
            content = content.replace(
              ASSET_REG[type],
              function (str, tag, src) {
                var _f = str[0];
                src = src.replace(/(^['"]|['"]$)/g, "");

                if (/\.min\./gi.test(src)) {
                  //压缩文件不加版本号
                  return src;
                }
                var assetPath = path.join(filePath, src);
                if (fs.existsSync(assetPath)) {
                  var buf = fs.readFileSync(assetPath);

                  var md5 = ramdomHash(7); //获取版本号hash，只须要7位hash不须要太长
                  var verStr = "" + md5;
                  src = src + "?v=" + verStr;
                }
                src = _f + src + _f;
                return src;
              }
            );
          }
          file.contents = new Buffer(content);
          this.push(file);
          cb();
        });
      })()
    )
    .pipe(gulp.dest("./temp/html/"));
}
//css中资源加版本号
function assetRev(options) {
  var ASSET_REG = {
    SCRIPT: /(<script[^>]+src=)['"]([^'"]+)["']/gi,
    STYLESHEET: /(<link[^>]+href=)['"]([^'"]+)["']/gi,
    IMAGE: /(<img[^>]+src=)['"]([^'"]+)["']/gi,
    BACKGROUND: /(url\()(?!data:|about:)([^)]*)/gi,
  };
  return through.obj(function (file, enc, cb) {
    options = options || {};
    if (file.isNull()) {
      this.push(file);
      return cb();
    }

    if (file.isStream()) {
      this.emit(
        "error",
        new gutil.PluginError(PLUGIN_NAME, "Streaming not supported")
      );
      return cb();
    }

    var content = file.contents.toString();
    var filePath = path.dirname(file.path);

    for (var type in ASSET_REG) {
      if (type === "BACKGROUND" && !/\.(css|scss|less)$/.test(file.path)) {
      } else {
        content = content.replace(ASSET_REG[type], function (str, tag, src) {
          src = src.replace(/(^['"]|['"]$)/g, "");
          if (!/\.[^\.]+$/.test(src)) {
            return str;
          }
          if (options.verStr) {
            src += options.verStr;
            return tag + '"' + src + '"';
          }
          // remote resource
          if (/^https?:\/\//.test(src)) {
            return str;
          }
          var assetPath = path.join(filePath, src);
          if (src.indexOf("/") == 0) {
            if (
              options.resolvePath &&
              typeof options.resolvePath === "function"
            ) {
              assetPath = options.resolvePath(src);
            } else {
              assetPath = (options.rootPath || "") + src;
            }
          }

          if (fs.existsSync(assetPath)) {
            var buf = fs.readFileSync(assetPath);
            var md5 = ramdomHash(7);
            var verStr = (options.verConnecter || "") + md5;
            src = src + "?v=" + verStr; //减少版本号
          } else {
            return str;
          }
          return tag + '"' + src + '"';
        });
      }
    }

    file.contents = new Buffer(content);
    this.push(file);
    cb();
  });
}

//为css中引入的图片/字体等增加hash编码
function revAssetCsscss() {
  return gulp
    .src(paths.stylescss.src) //该工作针对的文件
    .pipe(assetRev()) //该工作调用的模块
    .pipe(gulp.dest("./temp/css")); //编译后的门路
}
function revAssetCsshtml() {
  return gulp
    .src(paths.styleshtml.src) //该工作针对的文件
    .pipe(assetRev()) //该工作调用的模块
    .pipe(gulp.dest("./temp/html")); //编译后的门路
}
//压缩css，并增加sourcemap
function stylesMinifyCss() {
  return (
    gulp
      .src(paths.stylescss.src)
      .pipe(sourcemaps.init())
      // .pipe(less())
      // .pipe(cleanCSS())
      // // pass in options to the stream
      // .pipe(rename({
      //   basename: 'main',
      //   suffix: '.min'
      // }))
      .pipe(minifycss())
      .pipe(sourcemaps.write("./maps"))
      .pipe(gulp.dest(paths.stylescss.dest))
  );
}
//把html文件夹下的css进行压缩
function stylesMinifyHtml() {
  return (
    gulp
      .src(paths.styleshtml.src)
      .pipe(sourcemaps.init())
      .pipe(minifycss())
      .pipe(sourcemaps.write("./maps"))
      .pipe(gulp.dest(paths.styleshtml.dest))
  );
}
//压缩js，并增加sourcemap
function scriptsjs() {
  return gulp
    .src(paths.scriptsjs.src, { sourcemaps: true })
    .pipe(sourcemaps.init()) //源码映射便于调试
    .pipe(sourcemaps.identityMap())
    .pipe(babel()) //es6转换
    .pipe(uglify()) //压缩
    .pipe(sourcemaps.write("./maps"))
    .pipe(gulp.dest(paths.scriptsjs.dest));
}
//压缩html文件夹下的js
function scriptshtml() {
  return gulp
    .src(paths.scriptshtml.src, { sourcemaps: true })
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.identityMap())
    .pipe(babel())
    .pipe(uglify())
    .pipe(sourcemaps.write("./maps"))
    .pipe(gulp.dest(paths.scriptshtml.dest));
}
//把临时文件拷贝到生产目录
function copy() {
  return gulp
    .src("./temp/**/*", { base: "./temp" })
    .pipe(gulp.dest(destDir + "/"));
}
//创立一个json文件保留标识用于辨认以后是否是线上环境
function updateEnv(done) {
  fs.writeFile(
    "./temp/env.json",
    JSON.stringify({ env: "prod" }),
    function (err) {
      if (err) {
        console.error(err);
      }
      done();
      console.log("--------------------updateEnv");
    }
  );
}
var build = gulp.series(//串行工作
  clean,//革除上一次的生产包
  revClean,//删除temp文件夹
  revCopy,//拷贝开发目录到temp
  revHtmlPathReplace,//html加版本号
  revAssetCsscss,//给css资源加版本号
  revAssetCsshtml,
   updateEnv,//生成运行环境json
  copy, //copy之后再压缩
  gulp.parallel( //对两个入口的资源压缩、优化的并行任务
    stylesMinifyCss,
    stylesMinifyHtml,
    scriptsjs,
    scriptshtml
  ),
  revClean //删除temp
);
exports.clean = clean;
exports.stylesMinifyCss = stylesMinifyCss;
exports.stylesMinifyHtml = stylesMinifyHtml;
exports.updateEnv = updateEnv;
exports.scriptsjs = scriptsjs;
exports.scriptshtml = scriptshtml;
exports.default = build;

能够看出每个工作就是一个函数，在最初对定义的工作（函数）按程序进行执行一遍。
打包流程：
其实看最初的gulp.series 就能看进去，串行工作外面含有一个并行任务，间接运行gulp命令就能间接看到打包的过程。

所有工作执行的先后顺序：

删除上次生产包 > 删除temp文件夹 > 把开发目录拷贝到temp文件夹 > html内容加版本号 > 资源内容加版本号 > 创立json > 把temp文件拷到生产目录 > 开始并行压缩 > 最初删除temp文件夹

gulp实现防缓存

为什么要防缓存？
如果不防缓存，在原生我的项目上线后，浏览器会把前端的css，js资源缓存在本地，下次关上的时候如果资源不变就会间接应用本地的缓存来加载页面，这样会造成用户必须手动革除浏览器缓存能力应用新的性能，影响体验，所以就须要在页面引入资源的时候给文件加上版本号?v=xxxx，这样浏览器就能辨认到资源有变动就会从服务器上从新获取资源
咱们回看一下gulpfile文件中加版本号的工作revHtmlPathReplace：

//html中资源门路加版本号，更改所有的文件里的资源门路，以便接下来的减少版本号工作.
function revHtmlPathReplace() {
  var ASSET_REG = {
    SCRIPT:
      /("|')(.[^('|")]*((\.js)|(\.css)|(\.json)|(\.png)|(\.jpg)|(\.ttf)|(\.eot)|(\.gif)|(\.woff2)|(\.woff)))(\1)/gi,
  };
  return gulp
    .src("./temp/html/**/*.html")
    .pipe(
      (function () { //利用through读取html文件夹下的所有html文件
        return through.obj(function (file, enc, cb) {
          if (file.isNull()) {
            this.push(file);
            return cb();
          }
          if (file.isStream()) {
            this.emit(
              "error",
              new gutil.PluginError(PLUGIN_NAME, "Streaming not supported")
            );
            return cb();
          }
          var content = file.contents.toString();

          var filePath = path.dirname(file.path);
             for (var type in ASSET_REG) { //获取html文件内容间接应用replace+正则进行替换
            content = content.replace(
              ASSET_REG[type],
              function (str, tag, src) {
                var _f = str[0];
                src = src.replace(/(^['"]|['"]$)/g, "");

                if (/\.min\./gi.test(src)) {
                  //压缩文件不加版本号
                  return src;
                }
                var assetPath = path.join(filePath, src);
                if (fs.existsSync(assetPath)) {
                  var buf = fs.readFileSync(assetPath);
                  var md5 = ramdomHash(7); //获取版本号hash，只须要7位hash不须要太长
                  var verStr = "" + md5;
                  src = src + "?v=" + verStr;
                }
                src = _f + src + _f;
                return src;
              }
            );
          }
          file.contents = new Buffer(content);
          this.push(file);
          cb();
        });
      })()
    )
    .pipe(gulp.dest("./temp/html/"));
}

通过遍历所有html文件时应用through获取到文件的文本内容，而后利用正则对文本内容中须要加版本的门路加上hash版本而后替换下来，最初再输入一个新的文件文件。同时assetRev工作也相似
这个工作的代码其实是借鉴了gulp-asset-rev/index.js 中的源码，把原来源码中的css文件内容的资源门路加版本拿进去改成了给html文件内容加版本。
加版本后成果：

顺带说一下gulp另一种比拟麻烦的加版本防缓存计划就是应用rev模块，须要批改多处源码。这种计划有不好的中央，因为是生成rev-manifest.json对应关系来加版本，如果因为某些起因在这个json中没有对应文件对照，会导致某些非凡门路如(../../xxx.js)的文件加版本号没加上就会漏掉某些文件没加版本。还有就是node_modules源码改变后重新安装就会被笼罩。

最初：

对打包流程进行一些优化
1.因为每次打包后是都要手动进行压缩、命名一下再发给后端部署。解放双手，写一个打包后对生产包主动进行压缩的工作distZip：
这个distZip工作要放到最初执行，默认压缩当前目录下的dist文件夹

//对生产包主动压缩成zip
function distZip(done) {
  var archiver = require("archiver");
  var now = new Date();
  var filename = [
    __dirname + "/dist",
    now.getMonth(),
    now.getDate(),
    now.getHours(),
    now.getMinutes(),
    now.getSeconds(),
    ".zip",
  ].join(""); //以后工夫拼接
  var output = fs.createWriteStream(filename);
  //设置压缩格局为zip
  var archive = archiver("zip", {
    zlib: { level: 9 }, // Sets the compression level.
  });  archive.on("error", function (err) {
    throw err;
  }); 
   archive.pipe(output);
  archive.directory("./dist/");
  archive.finalize();
  done();
}

2.在原生我的项目打包实现时没有像webpack有process.env来辨别是否是生产环境，能够在打包阶段写一个生成以后运行环境配置文件的工作updateEnv，主动生成一个json文件，我的项目进入时提前加载这个json文件，在代码中就能够用这个json里的env标识来判断以后是否在生产环境。

function updateEnv(done) {
  fs.writeFile(
    "./temp/env.json",
    JSON.stringify({ env: "prod" }),
    function (err) {
      if (err) {
        console.error(err);
      }
      done();
      console.log("--------------------updateEnv");
    }
  );
}

3.以上打包的js、css资源文件没有做文件合并的工作，如果提前进行js，css文件合并就能够解决了文件扩散的问题，就不须要多设置入口了

关于gulp:从实战带你认识gulp打包前端项目并实现防缓存

gulp是什么？

gulp的利用场景？为什么用gulp？

gulp的装置

gulp理论利用之原生前端我的项目打包：

gulp实现防缓存

最初：

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于gulp:从实战带你认识gulp打包前端项目并实现防缓存

gulp是什么？

gulp的利用场景？为什么用gulp？

gulp的装置

gulp理论利用之原生前端我的项目打包：

gulp实现防缓存

最初：

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复