gulp之静态资源防缓存处理

时间:2022-05-08 23:35:53

  最近,因为校友网项目开始有些规模了。开始就要考虑对静态资源进行工程自动化的管理。一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS。这三个都有各自的特点,大家可以依据自己的喜好,选择工具。至于为什么选择Gulp,因为Grunt的gruntfile配置真的很头大好吗!简直看到头晕晕,但是还是有不少人喜欢这种方式的。然后FIS真心很强大,你所需要的,基本它都提供了,并且做得很好很简单,如果你急于马上使用可以赶紧去看看。而我为什么不用呢,感觉可能是因为,有点黑盒子?哈哈哈....不说了,让我们赶紧看看今天的主角——Gulp。

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

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

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

  若是我们手动修改,这会有多麻烦呢?大家可以想一想,我们先用工具压缩了资源,然后手动更改名字,再打开相应的页面,改路径。这样一直枯燥的重复,不仅容易出错,而且尼玛工作量很大好嘛?!程序员自有懒人在,我们就站在懒巨人的肩膀上,沐浴春风。

  那在gulpfile中,我们要用到的插件有哪些呢?

  gulp之静态资源防缓存处理

  require完之后,我们就可以开始编写一个简单实用的版本控制的自动化工具了。

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

  gulp之静态资源防缓存处理

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

  gulp之静态资源防缓存处理

  gulp之静态资源防缓存处理

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

  gulp之静态资源防缓存处理

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

  gulp之静态资源防缓存处理

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

gulp之静态资源防缓存处理

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

  是不是讲的十分不清楚呢?!哈哈哈,我跳过了一些的步骤 ,我只是想推荐大家gulp-rev配合gulp-rev-collector,这个自动化静态资源版本控制工具用gulp是可以做到的!所以要是大家不大会使用gulp的可以先自行寻找教程,最后再回来实现一遍。