锐客网

  1. 首页 > it技术 > >

【从实战带你认识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原生项目为例子，目录结构：
【从实战带你认识gulp】打包前端项目并实现防缓存
文章图片

路径表：
因为项目结构有点特殊，资源比较分散，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 = https://www.it610.com/article/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 = https://www.it610.com/article/src +"?v=" + verStr; } src = https://www.it610.com/article/_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: /(]+src=https://www.it610.com/article/)['"]([^'"]+)["']/gi, STYLESHEET: /(]+href=https://www.it610.com/article/)['"]([^'"]+)["']/gi, IMAGE: /(【从实战带你认识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 = https://www.it610.com/article/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 = https://www.it610.com/article/src +"?v=" + verStr; } src = https://www.it610.com/article/_f + src + _f; return src; } ); } file.contents = new Buffer(content); this.push(file); cb(); }); })() ) .pipe(gulp.dest("./temp/html/")); }

【【从实战带你认识gulp】打包前端项目并实现防缓存】通过遍历所有html文件时使用through获取到文件的文本内容，然后利用正则对文本内容中需要加版本的路径加上hash版本然后替换上去，最后再输出一个新的文件文件。同时assetRev任务也类似
这个任务的代码其实是借鉴了gulp-asset-rev/index.js 中的源码，把原来源码中的css文件内容的资源路径加版本拿出来改成了给html文件内容加版本。
加版本后效果：
【从实战带你认识gulp】打包前端项目并实现防缓存
文章图片

顺带说一下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文件合并就可以解决了文件分散的问题，就不需要多设置入口了

    推荐阅读


    上一篇：重新学习设计模式一（什么是设计模式）

    下一篇：公式也能变色，你见过这样的吗.....