gulp實現開發生產版本,自動新增版本號為引數格式

2021-08-28 19:43:10 字數 4929 閱讀 7808

以下為舊版本,會存在bug,以github最新更新為準

gulpfile.js

//引入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'));

修改rev的配置檔案以實現引數格式字尾

開啟node_modules\gulp-rev\index.js

//第144行 

manifest[originalfile] = revisionedfile;

//更新為:

manifest[originalfile] = originalfile + 『?v=』 + file.revhash;

開啟nodemodules\rev-path\index.js

//9行 

return modifyfilename(pth, (filename, ext) => );

//更新為:

return modifyfilename(pth, (filename, ext) => filename + ext);

開啟node_modules\gulp-rev-collector\index.js

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...