gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀 防止缓存

第一步，安装所需的包，用npm安装，如下：

npm install gulp gulp-rev run-sequence gulp-rev-collector --save-dev

第二步，在gulpfile.js文件中写上配置：

//引入gulp和gulp插件

var gulp = require('gulp'),

runSequence = require('run-sequence'),

rev = require('gulp-rev'),

revCollector = require('gulp-rev-collector');

//定义css、js源文件路径

var cssSrc = './app/static/css/*.css',

jsSrc = './app/static/js/admin/*.js';

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revCss', function(){

return gulp.src(cssSrc)

.pipe(rev())

.pipe(gulp.dest('./rev/css'))

.pipe(rev.manifest())

.pipe(gulp.dest('./rev/css'));

});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revJs', function(){

return gulp.src(jsSrc)

.pipe(rev()) //给文件添加hash编码

.pipe(gulp.dest('./rev/js/admin'))

.pipe(rev.manifest()) //生成rev-mainfest.json文件作为记录

.pipe(gulp.dest('./rev/js'));

});

//Html替换css、js文件版本

gulp.task('revHtmlCss', function () {

return gulp.src(['./rev/css/*.json', './app/index.html'])

.pipe(revCollector()) //替换html中对应的记录

.pipe(gulp.dest('./View')); //输出到该文件夹中

});

gulp.task('revHtmlJs', function () {

return gulp.src(['./rev/js/*.json', './View/index.html'])

.pipe(revCollector())

.pipe(gulp.dest('./View'));

});

//开发构建

gulp.task('dev', function (done) {

condition = false;

//依次顺序执行

runSequence(

['revCss'],

['revHtmlCss'],

['revJs'],

['revHtmlJs'],

done);

});

第三步，打开cmd，切换到项目所在的目录，运行

gulp dev

ok,完工！！！