【重要总结】使用gulp来解决浏览器缓存的问题。还有遇到的bug。missing script: gulp和Task function must be specified

开始浏览器缓存，我们是在css 和js后面加上随机数。

<script  type="text/javascript">
    document.write('<link href="test.css?ver="'+Math.random()+' ref="stylesheet"/>');
　　document.write('<script src="test.js?ver="'+Math.random()+'  type="text/javascript"</script>');
</script>

但是这样每次页面打开都会加载随机数刷新一遍的确是避免了缓存。但是如果使用的人很多，总是刷新页面就会出现加载很慢的白屏现象。所以我们想能不能每次只刷新修改了的页面。

于是找到了gulp这种方式，他和上面的原理一样是css和js后面加随机数。

但是是每次只改变你修改的文件后面的随机数。这样就避免了每次所有请求的页面都刷新了

 

下面介绍方法：

1.node和npm的下载是前提。gulp是基于他们使用的。所以要先下载好。如果要用cnpm下载速度可以更快。也可以先下载。、

可以参考我这篇文章进行下载这些如何创建一个vue的新项目，用命令行的方式创建.下载node.js

2.新建一个文件夹在里面打开命令提示行。执行npm init 。根据提示一直运行到is this ok。输入yes

之后我们可以看到文件夹里有个package.json的文件。

3.安装gulp和gulp插件。为了能够下载的快一点我用的cnpm安装的。

cnpm install --save-dev gulp

cnpm install --save-dev gulp-rev

cnpm install --save-dev gulp-rev-collector

cnpm install --save-dev run-sequence

执行完这些我们发现文件夹里面多了一个node_modules

4.更改gulp-rev和gulp-rev-collector

    1.打开node_modules\gulp-rev\index.js

搜索manifest[originalFile] = revisionedFile;改成 manifest[originalFile] = originalFile + '?v=' + file.revHash;

          2.打开nodemodules\gulp-rev\nodemodules\rev-path\index.js

搜索return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);改成

return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

3.打开node_modules\gulp-rev-collector\index.js

搜索var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );

改成：var cleanReplacement = path.basename(json[key]).split('?')[0];

5。配置gulpfile.js, 可参考下面gulpfile.js代码

下面要注意的是页面所引入的js和css文件的路径。还有html的路径。如果与多个js。css要用数组表示。每个html都要配置。根据他们的路径可能需要写多个task。下面的例子就是根目录下有个index.html.views文件夹里面也有html页面。

//引入gulp和gulp插件
  var gulp = require('gulp'),  
  runSequence = require('run-sequence'),   
  rev = require('gulp-rev'),    
  revCollector = require('gulp-rev-collector');
//定义css、js文件路径，是本地css,js文件的路径，可自行配置
  var cssUrl = 'lib/*.css',   //引入的css文件的路径和js的路径可能有多个就用数组表示
  jsUrl = ['lib/*.js','lib/js/*.js'];
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
  gulp.task('revCss', function(){   
  return gulp.src(cssUrl)        
 .pipe(rev())        
 .pipe(rev.manifest())        
 .pipe(gulp.dest('rev/css'));
 });
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
  gulp.task('revJs', function(){    
  return gulp.src(jsUrl)        
 .pipe(rev())        
 .pipe(rev.manifest())        
 .pipe(gulp.dest('rev/js'));
 });
 //Html更换css、js文件版本
   gulp.task('revHtmlView', function () {    
   return gulp.src(['rev/**/*.json', 'views/*.html'])  /*views是本地html文件的路径，可自行配置*/        
  .pipe(revCollector())        
  .pipe(gulp.dest('views'));  /*Html更换css、js文件版本,views也是和本地html文件的路径一致*/
 });
 gulp.task('revHtml', function() {
    return gulp.src(['rev/**/*.json', '*.html']) /*根目录下的html页面*/
        .pipe(revCollector())
        .pipe(gulp.dest(''));
});
//开发构建
  gulp.task('dev', function (done) {   
  condition = false;   
  runSequence(       
  ['revCss'],       
  ['revJs'],
  ['revHtmlView'],
  ['revHtml'],        
  done);});
  gulp.task('default', ['dev']);

 

 

我的文件目录是这样的

 

6，执行npm run gulp

发现报错了missing script: gulp。
 

最后发现需要修改package.json里面的"scripts": {
    "gulp": "gulp"
  },

还是报错Task function must be specified。翻译过来就是：必须指定任务函数

最后发现是gulp 的版本问题，查看package.json此时版本是4.0.2.这个4.0及以上版本的task写法修改了。最后我就想把gulp版本降低到3.9.1。

执行卸载cnpm uninstall gulp -g

然后重新安装cnpm install --save-dev [e-mail]

最后再试试npm run gulp

本来后面没有版本号的文件现在后面加了随机数。

如果我修改了a.css再去执行一下npm run gulp看到下面后面的随机数就变了。