1.gulp-rev: 為靜態(tài)文件隨機添加一串hash值, 解決cdn緩存問題, a.css --> a-d2f3f35d3.css
API:
rev.manifest.json: 生成源文件和添加hash后文件的映射
安裝: npm install --save-dev gulp-rev
使用:
var gulp = require('gulp')
var rev = require('gulp-rev')
gulp.task('rev', function(){
gulp.src('src/*.css')
.pipe(rev())//添加hash后綴
.pipe(gulp.dest('dist/css'))//移動到dist/css
.pipe(rev.manifest())//生成文件映射
.pipe(gulp.dest('rev/css'))//將映射文件導出到rev/css
})
gulp-rev插件只能添加后綴, 不能講html里的路徑替換, 如果想要替換路徑, 就需要gulp-rev-collector
2.gulp-rev-collector: 根據rev生成的manifest.json文件中的映射, 去替換文件名稱, 也可以替換路徑
安裝: npm install --save-dev gulp-run-collector
使用:
var gulp = require('gulp');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var runSequence = require('run-sequence');
var clean = require('gulp-clean')
gulp.task('css', function() {
return gulp.src('src/css/*.css')
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(rev())
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
gulp.task('rev', function() {
return gulp.src(['rev/**/*.json', 'src/app/*.html'])
.pipe(revCollector({
replaceReved: true,//允許替換, 已經被替換過的文件
dirReplacements: {
'css': '/dist/css',
'js': '/dist/js'
}
}))
.pipe(gulp.dest('dist'));
});
gulp.task('clean', function(){
return gulp.src(['dist', 'rev'])
.pipe(clean());
});
gulp.task('build', function(cb) {
runSequence('clean', ['css', 'js'], 'rev', cb);
});
對插件源碼做一些小的修改, 就可以將a-5da2910089.css模式轉變成更加方便的-5da2910089模式
第一步: 進入/node_modules/gulp-rev/index.js修改代碼:
將return through.obj((file, enc, cb) => {
// Ignore all non-rev'd files
if (!file.path || !file.revOrigPath) {
cb();
return;
}
const revisionedFile = relPath(path.resolve(file.cwd, file.base), path.resolve(file.cwd, file.path));
const originalFile = path.join(path.dirname(revisionedFile), path.basename(file.revOrigPath)).replace(/\\/g, '/');
manifest[originalFile] = revisionedFile;//這段刪除
manifest[originalFile] = originalFile + '?v=' + file.revHash;//這段添加
cb();
}
第二步: 進入/node_modules/rev-path/index.js修改代碼:
將第一個函數中的:return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`); 里邊的-${hash}刪掉;
將第一個函數中的:return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '') + ext); 里邊的.replace(new RegExp(`-${hash}$`), '') 刪掉;
第三步: 進入/node_modules/gulp-rev-collector/index.js修改代碼:(更改兩處)
1) 140 和 160行
// regexp: new RegExp( dirRule.dirRX + pattern, 'g' ),//刪除這段
regexp: new RegExp( dirRule.dirRX + pattern+'(\\?v=\\w{10})?', 'g' ),//添加這段
// regexp: new RegExp( prefixDelim + pattern, 'g' ),//刪除這段
regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),//添加這段
2) 40行
// var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );//刪除
var cleanReplacement = path.basename(json[key]).split('?')[0];//添加
