var gulp = require('gulp'),
newer = require("gulp-newer"),//用於僅傳遞比相應目標檔案更新的原始檔。
imagemin = require("gulp-imagemin"),//使用縮小png，jpeg，gif和svg影象
sass = require("gulp-sass"),//編譯scss檔案生成css檔案
cleancss = require('gulp-clean-css'),//壓縮css檔案
rename = require("gulp-rename"),//重新命名
sourcemaps = require("gulp-sourcemaps"),//除錯看到原始檔，demo裡面沒有加
//concat = require("gulp-concat"),//合併檔案
uglify = require("gulp-uglify"),//壓縮js
gulpsequence = require("gulp-sequence"),//按順序執行一系列任務
browsersync = require("browser-sync"),//能讓瀏覽器實時、快速響應您的檔案更改（html、js、css、sass、less等）並自動重新整理頁面
fileinclude = require('gulp-file-include'),//引入其他檔案
proxymiddleware = require('http-proxy-middleware'),//用於把請求****到其他伺服器的中介軟體。
assetrev = require('gulp-asset-rev'),//新增版本號
rev = require('gulp-rev'),//通過將內容雜湊附加到檔名unicorn.css→ 來進行靜態資產修訂 unicorn-d41d8cd98f.css
revcollector = require('gulp-rev-collector');//清單中的靜態資產修訂資料收集器，從不同的流生成，並在html模板中替換它們的鏈結。
const folder = ;
gulp.task("imagemin", function () );
// compile & minify sass
gulp.task("scss", function () )
).pipe(rev())
.pipe(sourcemaps.write("./"))//除錯看到原始檔，demo裡面沒有加
.pipe(gulp.dest(folder.dist + "css"))
.pipe(rev.manifest())//生成rev-manifest.json檔案
.pipe(gulp.dest(folder.dist + "css/rev"));//儲存rev-manifest.json檔案位置
});gulp.task("css", function () )
).pipe(rev())
.pipe(sourcemaps.write("./"))//除錯看到原始檔，demo裡面沒有加
.pipe(gulp.dest(folder.dist + "common"))
.pipe(rev.manifest())
.pipe(gulp.dest(folder.dist + "common/rev"));
});// js
gulp.task("js", function () );
gulp.task("html", function () ))
.pipe(revcollector())
.pipe(gulp.dest(out));
});var middleware = proxymiddleware('/api', ,
loglevel: 'debug'
});// live browser loading
gulp.task("browsersync", function () ,
port: 8081
});});
// watch all changes
gulp.task("watch", function () );
gulp.task(
"build",
gulpsequence("imagemin", "fonts", "css", "scss", "js", "html")
);// default task
gulp.task(
"default",
gulpsequence(
"imagemin",
"css",
"scss",
"js",
"html",
"browsersync",
"watch"
));
-- 1
開啟node_modules\gulp-rev\index.js
134行：
manifest[originalfile] = revisionedfile;
更新為：
manifest[originalfile] = originalfile + '?v=' + file.revhash;
-- 2
開啟 node_modules\rev-path\index.js
注意：原文這裡的路徑是開啟nodemodules\gulp-rev\nodemodules\rev-path\index.js，根據你的具體情況進行修改。
9行 return modifyfilename(pth, (filename, ext) => `$-$$`);
更新為：return modifyfilename(pth, (filename, ext) => `$$`);
17行 return modifyfilename(pth, (filename, ext) => filename.replace(new regexp(`-$$`), '') + ext);
更新為： return modifyfilename(pth, (filename, ext) => filename + ext);
-- 3
開啟node_modules\gulp-rev-collector\index.js
40行：var cleanreplacement = path.basename(json[key]).replace(new regexp( opts.revsuffix ), '' );
更新為：var cleanreplacement = path.basename(json[key]).split('?')[0];
-- 4
開啟node_modules\gulp-assets-rev\index.js
78行 var verstr = (options.verconnecter || "-") + md5;
更新為：var verstr = (options.verconnecter || "") + md5;
80行 src = src.replace(verstr, '').replace(/(\.[^\.]+)$/, verstr + "$1");
更新為：src=src+"?v="+verstr;
-- 5、更改gulp-rev-collector
開啟node_modules\gulp-rev-collector\index.js
第173行
regexp: new regexp( prefixdelim + pattern, 'g' ),
gulp不生成打包檔案 gulp打包詳解
gulp的作用 刪除檔案中冗餘的內容，壓縮檔案，減小檔案體積 實際專案中執行的都是壓縮完成以後的檔案 減小載入響應時間 gulp打包壓縮物件 html，css，js，sass，webserver 音訊，外掛程式等正常情況下都是打包完成的，直接移動到dist檔案中就可以 伺服器食慾gulp一起繫結執行...
gulp不生成打包檔案 gulp打包詳解
gulp的作用 刪除檔案中冗餘的內容，壓縮檔案，減小檔案體積 實際專案中執行的都是壓縮完成以後的檔案 減小載入響應時間 gulp打包壓縮物件 html，css，js，sass，webserver 音訊，外掛程式等正常情況下都是打包完成的，直接移動到dist檔案中就可以 伺服器食慾gulp一起繫結執行...
gulp打包專案配置
var gulp require gulp var htmlmin require gulp htmlmin 壓縮html var uglify require gulp uglify 壓縮js var babel require gulp babel es6轉es5 var cleancss re...