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

爱被打了一巴掌 2023-07-24 03:27 1阅读 0赞

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

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

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

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

下面介绍方法：

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70][]

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

cnpm install --save-dev gulp

`c``npm install --save-dev gulp-rev`

`c``npm install --save-dev gulp-rev-collector`

`cnpm install --save-dev run-sequence`

`执行完这些我们发现文件夹里面多了一个`node\_modules

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 2][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 3][]

`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\];

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 4][]

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'\]);

我的文件目录是这样的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 5][]

6，执行npm run gulp

发现报错了missing script: gulp。

![2020040916595837.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 6][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 7][]

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

执行卸载cnpm uninstall gulp -g

然后重新安装cnpm install --save-dev gulp@3.9.1

最后再试试npm run gulp

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 8][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 9][]

你也可以直接下载这个文件拖拽到你的node\_modules文件。这里是我按照上面的方式修改以后的node\_modules包。拖进去会替换你原来没有修改过的文件

[https://download.csdn.net/download/qq\_33769914/12509900][https_download.csdn.net_download_qq_33769914_12509900]

如果出现node和gulp的兼容性问题看我们的其他文章[https://blog.csdn.net/qq\_33769914/article/details/116028993][https_blog.csdn.net_qq_33769914_article_details_116028993]

[vue_._node.js]: https://blog.csdn.net/qq_33769914/article/details/69944489?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158641969419195239821311%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158641969419195239821311&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-blog_SOOPENSEARCH-4
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: /images/20230528/52f8d39b9e0c4c9caeb046daf26d7f9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1]: /images/20230528/e6da17304fe8490687711c3b26ace4f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 2]: /images/20230528/aa12aada94e148179c71d5734437fb13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 3]: /images/20230528/2447e10c804643b3a48be47111bea47d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 4]: /images/20230528/95d19726e3a440578ecab0b2af6296cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 5]: /images/20230528/83a117ea211a4046a273e2c5ddb728be.png
[2020040916595837.png]: /images/20230528/44399de394484717a1dd6997138058d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 6]: /images/20230528/0fb98673639e49b5b3b76a281e4b44bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 7]: /images/20230528/2f043605eb7040168506e3c42c201dc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 8]: /images/20230528/de915144637646e482eb13154d0bfece.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 9]: /images/20230528/38f3dcae897a4d4d9b2f8550387a2f55.png
[https_download.csdn.net_download_qq_33769914_12509900]: https://download.csdn.net/download/qq_33769914/12509900
[https_blog.csdn.net_qq_33769914_article_details_116028993]: https://blog.csdn.net/qq_33769914/article/details/116028993