前端使用 gulp 解决多项目缓存问题-白红宇

目前使用例子的项目初始目录及文件如下：

因为本文所讲的是多目录多文件加 hash ，所以特意挑了几个简单但是有代表性的项目。

我们从0开始配置：

1、环境配置

在项目根目录启动 Git Bash（或其他命令行工具）

全局安装 node、npm （省略）

初始化 npm

npm init -y  // -y 即默认同意所有基础设置复制代码

此时本地会生成 package.json 配置文件

本地安装 gulp 及与该需求相关的几个插件

npm install --save-dev gulp // gulpnpm install --save-dev run-sequence // 设置插件执行顺序npm install --save-dev gulp-rev // 添加 hashnpm install --save-dev gulp-clean // 清理文件npm install --save-dev gulp-minify-css // css 代码压缩npm install --save-dev gulp-uglify // js 代码压缩npm install --save-dev gulp-rev-collector //html 替换文件版本//也可以合并在一起安装npm install --save-dev gulp run-sequence gulp-rev gulp-clean gulp-minify-css gulp-uglify gulp-rev-collector复制代码

安装过程会有点慢，安装完成后本地会生成 node_modules 文件夹，并且 package.json 文件打开后里面会有几个插件的基本信息

根目录下创建一个 js 文件用来配置 gulp 信息：gulpfile.js

完成以上配置后，此时我们的根目录应该是如下样子：

2、配置 gulifile.js

直接贴代码，看效果

//引入gulp和gulp插件 var gulp = require('gulp'),     runSequence = require('run-sequence'),     rev = require('gulp-rev'),     clean = require('gulp-clean'),     minifycss=require('gulp-minify-css'),     uglify=require('gulp-uglify'),     revCollector = require('gulp-rev-collector');  //定义css、js源文件路径 var cssSrc = 'projectSrc/**/*.css',            //选择目录下所有css       jsSrc = 'projectSrc/**/*.js',     //选择目录下所有css       srcExclude = '!./node_modules/**/*',    //排除node_modules中的文件       htmFile = 'projectSrc/**/*.htm',       htmlFile = 'projectSrc/**/*.html',       jsonFile = 'projectSrc/**/*.json',       pngFile = 'projectSrc/**/*.png',       jpgFile = 'projectSrc/**/*.jpg',       svgFile = 'projectSrc/**/*.svg',       gifFile = 'projectSrc/**/*.gif',       fontFile = 'projectSrc/**/*.ttf',       jsCompressPath = 'projectOut/**/*.js',    //压缩Publish中的js       cssCompressPath = 'projectOut/**/*.css',    //压缩Publish中的css       replaceHtm = 'projectOut/**/*.htm'; //替换htm中引用css和js名   //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射 gulp.task('revCss', function(){     // return gulp.src([cssSrc, srcExclude])     return gulp.src(cssSrc)         .pipe(rev())         .pipe(gulp.dest('projectOut'))         .pipe(rev.manifest())         .pipe(gulp.dest('rev/css')); });  //js生成文件hash编码并生成 rev-manifest.json文件名对照映射 gulp.task('revJs', function(){     // return gulp.src([jsSrc, srcExclude])     return gulp.src(jsSrc)         .pipe(rev())         .pipe(gulp.dest('projectOut'))         .pipe(rev.manifest())         .pipe(gulp.dest('rev/js')); });   //Html替换css、js文件版本 gulp.task('revHtml', function () {     return gulp.src(['rev/**/*.json', replaceHtm])         .pipe(revCollector())         .pipe(gulp.dest('projectOut')); }); //拷贝htm、html、json、图片、字体 gulp.task('copy', function(){     return gulp.src([htmFile, htmlFile, jsonFile, pngFile, jpgFile, svgFile, gifFile, fontFile])         .pipe(gulp.dest('projectOut')); });  //压缩JS gulp.task('jscompress', function(){     return gulp.src(jsCompressPath)         .pipe(uglify())         .pipe(gulp.dest("projectOut")); });  //压缩CSS gulp.task('csscompress', function(){     return gulp.src(cssCompressPath)         .pipe(minifycss())         .pipe(gulp.dest("projectOut")); }); //开发构建 gulp.task('dev', function (done) {     condition = false;     runSequence(         ['clean'],         ['revCss'],         ['revJs'],         ['copy'],         ['revHtml'],         ['jscompress'],         ['csscompress'],         done); });  gulp.task('clean', function(){     gulp.src('rev',{
   read:false}).pipe(clean());     return gulp.src('projectOut',{
   read:false}).pipe(clean()); });gulp.task('default', ['dev']);复制代码

我把输出的文件单独放在一个文件夹下，这样便于清理和保护源代码。以后每次改动代码就在原文件夹里面修改，修改完后构建一下就可以。

命令行跑一下 gulp 就OK了

gulp复制代码

我们来看一下成果：

看，是不是加上 hash 了？很简单是不是？不只文件加上了，html 中的引用也加上了。

等等

难道你以为这就完事了？这样加 hash 是有 bug 的！这样加相当于每次都给 js/css 重命名了一次，容易出错。

其实还有一种更好的方式，不过就需要修改 gulp 源文件中的几行代码了~~

老规矩，直接上代码

node_modules/gulp-rev/index.js

135行：manifest[originalFile] = revisionedFile;改为：manifest[originalFile] = originalFile + '?v=' + file.revHash;复制代码

node_modules/rev-path/index.js

9行：return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);改为：return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);复制代码

node_modules/gulp-rev-collector/index.js

40行：var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );改为：var cleanReplacement = path.basename(json[key]).split('?')[0];复制代码

改完后执行下

总结一下

前端使用 gulp 解决多项目缓存问题到此就告一段落了，在文章最后，总结一下使用过程中碰到的一些坑和使用的一些理解。

html/htm 中文件的引用路径要写到外层比如要在 login.html 中引用 login.js 文件，路径要写 '../login/login.js' ，而不能直接写成 'login.js'

runSequence 执行排序的时候，html替换css/js的插件要放到 hash插件和 copy插件后面，不然html中引用的文件不会加hash

注释掉的 // return gulp.src([jsSrc, srcExclude]) 第二个参数 srcExclude = '!./node_modules/**/*' 是指排除 node_modules 下的文件

最后提一个问题吧，乍听起来觉得我说的没什么问题，当你想明白后你会觉得我问的很白痴

问题：按最后的方法构建完成后，js/css 文件本身怎么不加 hash 了？

以上