以下為舊版本,會存在bug,以github最新更新為準
gulpfile.js
修改rev的配置檔案以實現引數格式字尾//引入gulp及各種元件;
'use strict';
var gulp = require('gulp'),
uglify = require('gulp-uglify'), //壓縮js
minifycss = require('gulp-clean-css'), //壓縮css
gulpsequence = require('gulp-sequence'), //按順序執行任務,不能省略return
rename = require('gulp-rename'), //重新命名
cached = require('gulp-cached'), //快取
fontspider = require('gulp-font-spider'), //字蛛,中文字型壓縮,.html檔案加入文字時需執行
imagemin = require('gulp-imagemin'), //壓縮
rev = require('gulp-rev'), //版本號
revcollector = require('gulp-rev-collector'), //在html中更改版本號路徑
plumber = require('gulp-plumber'), //外掛程式發生錯誤導致程序退出並輸出錯誤日誌
merge = require('merge-stream'), //合併流
imageminjpegrecompress = require('imagemin-jpeg-recompress'), //jpg壓縮
imageminoptipng = require('imagemin-optipng'), //png壓縮
browsersync = require('browser-sync').create(); //瀏覽器自動重新整理
//設定各種輸入輸出資料夾的位置;
var src_dir = './src/',
pub_dir = './public/',
src_dir_script = src_dir + 'js/*.js',
src_dir_min_script = src_dir + 'js/*.min.js',
src_dir_css = src_dir + 'css/*.css',
src_dir_min_css = src_dir + 'css/*.min.css',
src_dir_image = src_dir + 'images/*',
src_dir_font = src_dir + 'font/*',
src_dir_html = src_dir + '*.html',
pub_dir_script = pub_dir + 'js',
pub_dir_css = pub_dir + 'css',
pub_dir_image = pub_dir + 'images',
pub_dir_html = pub_dir + '*.html',
pub_dir_font = pub_dir + 'font';
//處理js檔案:壓縮,然後換個名輸出;
//命令列使用gulp script啟用此任務;
gulp.task('script', function() ))
.pipe(rev()) //新增版本號
.pipe(gulp.dest(pub_dir_script))
.pipe(rev.manifest()) //根據版本號生成rev-manifest.json
.pipe(gulp.dest('src/rev/js'));
//已壓縮檔案複製
var script_min = gulp.src(src_dir_min_script)
.pipe(gulp.dest(pub_dir_script));
return merge(script, script_min);
});//處理css檔案:壓縮,然後換個名輸出;
//命令列使用gulp css啟用此任務;
gulp.task('css', function() ))
.pipe(rev())
.pipe(gulp.dest(pub_dir_css))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/css'));
var css_min = gulp.src(src_dir_min_css)
.pipe(rev())
.pipe(gulp.dest(pub_dir_css))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/css'));
return merge(css, css_min);
});//css生成檔案hash編碼並生成 rev-manifest.json檔名對照對映
//sass檔案輸出css,天生自帶壓縮特效;
//命令列使用gulp sass啟用此任務;
/*gulp.task('sass', function() ))
.pipe(gulp.dest(dstsass));
});*/
//壓縮任務,支援jpeg、png及gif檔案;
//命令列使用gulp jpgmin啟用此任務;
gulp.task('imgmin', function() ),
pngmin = imageminoptipng();
return gulp.src(src_dir_image)
.pipe(cached('imgmin'))
.pipe(imagemin())
.pipe(gulp.dest(pub_dir_image));
});//把所有html頁面扔進public資料夾(不作處理);
//命令列使用gulp html啟用此任務;
gulp.task('html', function() );
//html替換css、js檔案版本
gulp.task('revhtml', function () )
//複製字型檔案
gulp.task('font', function() );
// fontspider任務,在public中壓縮字型檔案並替換。
gulp.task('fontspider', function() );
//伺服器任務:以public資料夾為基礎,啟動伺服器;
//命令列使用gulp server啟用此任務;
gulp.task('server', function() );
});//監控改動並自動重新整理任務;
//命令列使用gulp auto啟動;
gulp.task('auto', function() )
});gulp.watch(src_dir_css, function(event))
});/*gulp.watch(srcsass, ['sass']);*/
gulp.watch(src_dir_image, ['imgmin']);
gulp.watch(src_dir_html, ['html']);
/* gulp.watch(pub_dir_html, ['fontspider']);*/
gulp.watch(pub_dir + '**/*.*').on('change', browsersync.reload);
});//gulp預設任務(); 圓括號中順序執行,中括號同時執行
gulp.task('default', gulpsequence(['script', 'css', 'imgmin' ],'revhtml', 'html' ,'server','auto'));
開啟node_modules\gulp-rev\index.js
開啟nodemodules\rev-path\index.js//第144行
manifest[originalfile] = revisionedfile;
//更新為:
manifest[originalfile] = originalfile + 『?v=』 + file.revhash;
開啟node_modules\gulp-rev-collector\index.js//9行
return modifyfilename(pth, (filename, ext) => );
//更新為:
return modifyfilename(pth, (filename, ext) => filename + ext);
let cleanreplacement = path.basename(json[key]).replace(new regexp( opts.revsuffix ), '' );
//修改為:
let cleanreplacement = path.basename(json[key]).split('?')[0];
gulp新增版本號解決快取問題
gulp新增版本號解決快取問題 方案 解決快取問題,發布前新增版本號 資料夾結構 檔案清理 const clean require gulp clean 加版本號 const assetrev require gulp asset rev 給html新增版本號 gulp.task htmlminta...
使用gulp為專案中的檔案自動新增版本號之實踐思路
需要用到的gulp外掛程式 1 gulp rev 2 gulp rev format 3 gulp rev replace 要實現html中增加版本號的效果 把gulp rev的配置 貼上出來,gulp rev幫我們生成乙個版本清單檔案 rev manifest.json 這個檔名和路徑都是可以在配...
VS開發中自動版本號的設定 SubWCRev命令
subwcrev這個命令是tortoisesvn bin下的命令 所以前提是你的開發機需要確認安裝了svn的客戶端,並且你本機的 是svn上down下來的,也就是 需要是乙個working copy 下面說一下如何使用 1.假如你的工程內有乙個version.h的標頭檔案,如下 ifndef ver...