通過(guò)兩種方法的實(shí)踐過(guò)程對(duì)比,決定使用第二種辦法,所以這里介紹一下第二種方式的實(shí)現(xiàn)過(guò)程:
一.
原結(jié)構(gòu)下html文件代碼:<link rel="stylesheet" href="../css/style.css"><script src="../js/index.js"></script>
<link rel="stylesheet" href="../css/style.css?v=0d83247610"><script src="../js/index.js?v=61c1ef9f34"></script>
npm install --save-dev gulpnpm install --save-dev gulp-revnpm install --save-dev gulp-rev-collectornpm install --save-dev run-sequence
//引入gulp和gulp插件 var gulp = require('gulp'), runSequence = require('run-sequence'), rev = require('gulp-rev'), revCollector = require('gulp-rev-collector');//定義css、js文件路徑,是本地css,js文件的路徑,可自行配置 var cssUrl = 'css/*.css', jsUrl = 'js/*.js';//CSS生成文件hash編碼并生成 rev-manifest.json文件名對(duì)照映射 gulp.task('revCss', function(){ return gulp.src(cssUrl) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/css')); });//js生成文件hash編碼并生成 rev-manifest.json文件名對(duì)照映射 gulp.task('revJs', function(){ return gulp.src(jsUrl) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest('rev/js')); }); //Html更換css、js文件版本 gulp.task('revHtml', function () { return gulp.src(['rev/**/*.json', 'WEB-INF/views/*.html']) /*WEB-INF/views是本地html文件的路徑,可自行配置*/ .pipe(revCollector()) .pipe(gulp.dest('WEB-INF/views')); /*Html更換css、js文件版本,WEB-INF/views也是和本地html文件的路徑一致*/ });//開發(fā)構(gòu)建 gulp.task('dev', function (done) { condition = false; runSequence( ['revCss'], ['revJs'], ['revHtml'], done);}); gulp.task('default', ['dev']);
1.打開node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash; 2.打開nodemodules\gulp-rev\nodemodules\rev-path\index.js 10行 return filename + '-' + hash + ext; 更新為: return filename + ext; 3.打開node_modules\gulp-rev-collector\index.js 31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) { 更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
<link rel="stylesheet" href="../css/style.css?v=0d83247610"> <script src="../js/index.js?v=61c1ef9f34"></script>
當(dāng)你完成第二步gulpfile.js的編寫,然后執(zhí)行g(shù)ulp后,你會(huì)發(fā)現(xiàn)效果如下: //rev目錄下生成了manifest.json對(duì)應(yīng)文件 { "style.css": "style-0d83247610.css"} <link rel="stylesheet" href="../css/style-0d83247610.css"> <script src="../js/index-61c1ef9f34.js"></script>
這明顯沒(méi)有達(dá)到我們想要的效果,所以要按照第三步的要求更改代碼!
最后附上一個(gè)gulp自動(dòng)添加版本號(hào)的鏈接,里面寫的更加詳細(xì)http://www.cnblogs.com/givebest/p/4707432.html
聯(lián)系客服