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));});新聞熱點
疑難解答
