https://github.com/sindresorhus/gulp-rev/blob/master/integration.md 如何通過後端服務(php)做靜態資源的版本化,當然也有直接通過前端構建工具靜態資源版本化,
下面是angular項目,使用gulp直接實現靜態資源版本化。
/**
* build 時的 js 壓縮, 文件 hash 地址替換
*/
var gulp = require('gulp');
var config = require('../config').inject;
var handleErrors = require('../util/handleErrors');
/**
* 根據文件內容生成Hash名稱,映射表寫入 dest/rev-manifest.json 文件中。
*/
gulp.task("revision", function() {
var gulpif = require('gulp-if');
var rev = require('gulp-rev');
var uglify = require('gulp-uglify');
return gulp.src([config.src + "/**/*.css", config.src + "/**/*.js"])
.pipe(rev())
.pipe(gulpif(/.*?vendor[-\d\w]*\.js$/, uglify()))
.pipe(gulp.dest(config.dest))
.pipe(rev.manifest())
.on('error', handleErrors)
.pipe(gulp.dest(config.dest));
});
/**
* 根據 revision 任務生成的映射表,html中引用的資源文件名稱進行替換
*/
gulp.task("inject", ["revision"], function(){
var manifest = gulp.src(config.dest + "/rev-manifest.json");
var replacePath = require('gulp-replace-path');
var revReplace = require('gulp-rev-replace');
var path = require('path');
// 處理html中的相對路徑爲相對config.src的絕對路徑
var replacement = function (match, __absolutePath__) {
return function (match, srcStr, originPath) {
if (originPath.charAt(0) === '/' || /^http/i.test(originPath)) { // absolute path
return match;
} else {
var relative = path.relative(process.cwd() + '/' + config.src, path.dirname(__absolutePath__));
return (srcStr + "/" + path.join(relative, originPath)).replace(/\\/g, '/'); // fix windows下sep
}
};
};
return gulp.src(config.htmlSrc, {base: config.src})
.pipe(replacePath(/(<script[^>]*?src=['"])([^'"]*)/g, replacement)) // 替換script src
.pipe(replacePath(/(<link[^>]*?href=['"])([^'"]*)/g, replacement)) // 替換 link中的 href
.pipe(revReplace({manifest: manifest, canonicalUris: false}))
.pipe(gulp.dest(config.htmlDest));
});