gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。
gulp-rev则会根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系。
通过gulp脚本部署, 就可以做到当我们文件内容发生改变时, 浏览器读取新文件,而不会因为缓存问题,页面无法立即刷新,以下以css, js文件版本控制为例:
安装插件依赖
推荐使用gulp-rev
,gulp-rev-collector
插件
1 | npm install --save-dev gulp |
CSS,JS文件版本控制
静态资源存放在public目录,版本映射文件存放在rev目录,根据具体目录自行修改
1 | var gulp = require('gulp'); |
执行完以上两个任务后,就可以在rev/js, rev/css找到rev-manifest.json
MD5映射文件,形如:
1 | { |
根据映射文件替换HTML内容
1 | gulp.task('rev-html', function() { |
创建Gulp默认任务(可选)
以上操作完成后,就可以直接将public目录部署到服务器上即可,但每次都要执行3条命令太麻烦,所以我们可以创建个默认任务,之后执行gulp命令即可一键完成。
首先rev-css和rev-js任务可以是并行的,rev-html必须在前面两个任务完成后才执行,所以我们这里可以安装gulp-run-sequence
插件来控制任务的串并行。(或者使用gulp 4.X版本的gulp.parallel
, gulp.series
)
- 安装
gulp-run-sequence
1
npm install --save-dev gulp-run-sequence
- gulp脚本
1
2
3
4
5var runSequence = require('gulp-run-sequence');
// 先压缩css和js文件后,在执行html替换(要确保MD5之后)
gulp.task('default', function(cb) {
runSequence(['rev-css','rev-js'], 'rev-html', cb);
})