gulp之静态资源防缓存处理

如今推荐使用 Webpack 处理这一类静态资源的事情。它是基于配置化的，自身就已经集成了打 hash 的功能，还能够配合 HtmlWebpackPlugin 这个插件，生成资源时会把它的路径自动导入到 html 内。固然更重要的仍是 webpack 集成了 js 模块机制，各种资源地址可自动处理，可添加 babel，sass 等编译工具插件，提供压缩打包功能。至于如今这个过了几年了还能不能用，确实不清楚，由于工具升级可能会致使不兼容的状况。

2017/07/13

--------------------------------------------------如下为原文-----------------------------------------------------------

 

　　最近，由于校友网项目开始有些规模了。开始就要考虑对静态资源进行工程自动化的管理。一讲到前端的自动化工具，你们或许都会想到Grunt，Gulp，或者百度的FIS。这三个都有各自的特色，你们能够依据本身的喜爱，选择工具。至于为何选择Gulp，由于Grunt的gruntfile配置真的很头大好吗！简直看到头晕晕，可是仍是有很多人喜欢这种方式的。而后FIS真心很强大，你所须要的，基本它都提供了，而且作得很好很简单，若是你急于立刻使用能够赶忙去看看。而我为何不用呢，感受多是由于，有点黑盒子？哈哈哈....不说了，让咱们赶忙看看今天的主角——Gulp。

　　定义：gulp.js 是一种基于流的，代码优于配置的新一代构建工具。

　　关于还要安装Node，怎么样用npm加载须要的Node模块，就再也不赘述啦。固然使用yeoman来搭建手脚架是最快的，有兴趣的能够看看，慕课网里有噢。接下来看看咱们的案例。咱们的需求是，为了防止客户端的静态资源缓存，咱们须要每次更新css或js的时候，经过md5或时间戳等方式从新命名静态资源。让客户端能够从新请求资源，而不是从缓存里取。而后html模板里的src也要作相应的修改。固然，这里还有个附加的须要就是，静态资源须要自行优化（压缩合并）。

1. 静态资源优化
2. 静态资源重命名
3. 修改静态资源的引用路径

　　如果咱们手动修改，这会有多麻烦呢？你们能够想想，咱们先用工具压缩了资源，而后手动更更名字，再打开相应的页面，改路径。这样一直枯燥的重复，不只容易出错，并且尼玛工做量很大好嘛？！程序员自有懒人在，咱们就站在懒巨人的肩膀上，沐浴春风。

　　那在gulpfile中，咱们要用到的插件有哪些呢？

　　

　　require完以后，咱们就能够开始编写一个简单实用的版本控制的自动化工具了。

　　咱们一步一步来，咱们须要产出一个静态资源路径，咱们首先要清空里面曾经的资源，防止有冗余。那咱们就定义了一个clean任务，而后将src须要清理的文件夹引入，而后执行clean。src的第二个参数的{read:false}，是不读取文件加快程序。

　　　　

　　清理完以后，就能够对静态资源进行优化处理。那咱们定义两个任务，一个是css的，一个是js的。在css里，还能够编译less或sass，这里我就没有作。而后js里一样能够编译coffee。咱们来仔细看看下面的程序，首先任务名是css，而后src引入css文件，执行csso的压缩优化，而后重命名为*.min.css。接下来就是到了添加版本号，并将通过优化和版本控制的css输出到dist文件夹里。最后再用rev.manifest，将对应的版本号用json表示出来，这里能够参照下面第二张图。这样经过hash来精肯定位到html模板中须要更改的部分。

　　

　　

　　接着即是最后一步，改变引用路径，这里咱们将这个任务命名为rev。记得rev任务要在生成mainfest以后进行，能够用gulp[]任务依赖来进行流程控制。

　　

　　src引入一个数组，前一个是引入刚才生成的json文件，后一个是须要更改的html模板，固然我这里是jsp。而后replaceReved: true就能够成功替换了。最后将替换过的文件输出便可，这里我输出到了原来引入的路径，这样就能够成功替换了。若是你在开发的时候须要不断调试，还能够加上gulp.watch，实时监控文件变化，而后动态作出响应。固然仍是推荐开发与上线分开不一样的文件夹进行管理。（但是我这坑爹的组长没有！妈蛋！）最后来看一下按照这样执行的大概结果。

　　

　　这是成功生成到dist的静态资源，都加上了相应的后缀。这里要着重强调，修改的仅仅是后缀名，而以前的路径是不会帮你修改的。也就是说，你的原来的Html引入静态资源的时候，路径就要预先写好，而后rev来帮你修改后缀。至因而不是有更好的方法，我暂时还不清楚～～

　　这是html模板上的引用路径作了对应的变化。

 

　　是否是讲的十分不清楚呢？！哈哈哈，我跳过了一些的步骤 ，我只是想推荐你们gulp-rev配合gulp-rev-collector，这个自动化静态资源版本控制工具用gulp是能够作到的！因此要是你们不大会使用gulp的能够先自行寻找教程，最后再回来实现一遍。