前端使用 gulp 解决多项目缓存问题

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

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

我们从0开始配置：

1、环境配置

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

• 全局安装 node、npm （省略）

• 初始化 npm

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

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

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

npm install --save-dev gulp // gulp
npm install --save-dev run-sequence // 设置插件执行顺序
npm install --save-dev gulp-rev // 添加 hash
npm 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 了？

---

以上

转载于:https://juejin.im/post/5bfcded06fb9a04a027a09a3