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