废话:好多后期要给工程增加版本号,清理浏览器缓存,所以使用这个鬼来搞一把
当然这里需要你用nodeJS的npm工具安装一些东西
不会nodejs,你先百度一把!
准备工作:你需要用npm包安装这些插件。
npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev
npm install --save-dev run-sequence
当然我第一次安装失败了,启动不了gulp;
于是,我用了全局安装gulp 命令为:
npm -g install gulp
我用的win7,所以在CMD中运行一把就发现安装成功了
好了,开始为我们工程增加版本号
第一步:打开node_modules\gulp-rev\index.js
找到下面的代码,将注释掉的改为下面的内容,此处为改变返回的版本号格式
/*manifest[originalFile] = revisionedFile;*/
manifest[originalFile] = originalFile + '?v=' + file.revHash;
第二步:打开node_modules\rev-path\index.js
找到下面的代码,将注释掉的改为下面的内容,此处为改变关联的下划线(老姿找了半天找不到这个rev-path
,是因为以前的gulp-rev
插件将这部分集成在了里面,而后续的版本将rev-path
从gulp-rev
里抽离出来了,所以要在项目目录的node_modules
里找这个插件,我们不需要手动安装,这是gulp-rev
的依赖,npm会自动安装!)
/*return filename + '-' + hash + ext;*/
return filename + ext;
第三步:打开node_modules\gulp-rev-collector\index.js
找到下面的代码,将注释掉的改为下面的内容,此文件最好改三个地方
一处:
/*if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
isRev = 0;
}*/
if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
isRev = 0;
}
二处:
//return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
//禁止重复添加版本号
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
return rp;
三处:
/*patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
+ opts.revSuffix
+ escPathPattern( path.extname(key) )
);*/
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
+ opts.revSuffix
+ escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
);
以上都做过多了,就可以创建一个文件,当然这个目录最好创建在工程名下第一级目录
例如我的目录为:
第四步:创建一个gulpfile.js文件所在目录如下。
内容为:
//引入gulp和gulp插件
var gulp = require('gulp'),
assetRev = require('gulp-asset-rev'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径并且可以传入多个不同的文件夹
var cssSrc = 'css/*.css',
jsSrc = 'js/lib/config.js',
jsGA = 'js/lib/GA.js',
baseTrend = 'js/lib/pk10BaseTrend.js',
jsSrcc = 'js/loacal/**/*.js',
ico = 'img/icon/*.ico';
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src([jsSrcc,jsSrc,jsGA,baseTrend])
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revIco', function(){
return gulp.src(ico)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/ico'));
});
//Html替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['index.html','*/**/*.*'])//将所有文件打包到新文件下
.pipe(revCollector())
.pipe(gulp.dest('KJW_HTML'));
});
//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
return gulp.src(cssSrc) //该任务针对的文件
.pipe(assetRev()) //该任务调用的模块
.pipe(gulp.dest('KJW_HTML/css')); //编译后的路径
});
//以下是拷贝静态图片和声音
gulp.task('copyimg', function() {
return gulp.src(['img/**/*'])
.pipe(gulp.dest('KJW_HTML/img'))
});
gulp.task('copyLibimg', function() {
return gulp.src(['js/lib/finishAnimation/*/*.*'])
.pipe(gulp.dest('KJW_HTML/js/lib/finishAnimation'))
});
gulp.task('copyMedia', function() {
return gulp.src(['media/*'])
.pipe(gulp.dest('KJW_HTML/media'))
});
//开发构建
gulp.task('default', function (done) {
condition = false;
runSequence( //说明,用gulp.run也可以实现以上所有任务,只是gulp.run是最大限度的并行执行这些任务,而在添加版本号时需要串行执行(顺序执行)这些任务,故使用了runSequence.
['revCss'],
['revJs'],
['revIco'],
['revHtml'],
['assetRev'],
['copyimg'],
['copyLibimg'],
['copyMedia'],
done);
});
ok,最后一下就直接运行就可以了
D:\DFF\PROJECT\KJW_HTML>gulp
[19:41:14] Using gulpfile D:\DFF\PROJECT\KJW_HTML\gulpfile.js
[19:41:14] Starting 'default'...
[19:41:14] Starting 'assetRev'...
[19:41:14] Finished 'assetRev' after 123 ms
[19:41:14] Starting 'revCss'...
[19:41:14] Finished 'revCss' after 25 ms
[19:41:14] Starting 'revJs'...
[19:41:14] Finished 'revJs' after 75 ms
[19:41:14] Starting 'revIco'...
[19:41:14] Finished 'revIco' after 3.06 ms
[19:41:14] Starting 'revHtml'...
[19:41:16] Finished 'revHtml' after 1.34 s
[19:41:16] Finished 'default' after 1.58 s
D:\DFF\PROJECT\KJW_HTML>
你运行完后就可以看到所有静态文件后面都有版本号了,因为有些不用改的资源目录不用变,如jq和其他功能插件
加完之后:
摘要: 更多前端学习请加群:JS/NDEJS/HTML5/(前端)458633781 或关注心魅体公众号:ilittlekiss