gulp打包修改配置文件

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 = {
src: "src/", // source files
dist: "dist/" // build files
};

gulp.task("imageMin", function () {
var out = folder.dist + "assets/images";
return gulp
.src(folder.src + "assets/images/**/*")
.pipe(newer(out))
.pipe(imagemin())
.pipe(gulp.dest(out));
});


// compile & minify sass
gulp.task("scss", function () {
return gulp.src(folder.src + 'scss/pages/*.scss')
.pipe(sourcemaps.init())//調試看到源文件，demo里面沒有加
.pipe(sass()) // scss to css
.pipe(cleanCSS())
.pipe(
rename({
// rename app.css to app.min.css
suffix: ".min"
})
)
.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 () {
return gulp.src(folder.src + 'css/*.css')
.pipe(sourcemaps.init())//調試看到源文件，demo里面沒有加
.pipe(cleanCSS())
.pipe(
rename({
suffix: ".min"
})
)
.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 () {
return gulp.src(folder.src + 'js/**/*.js')
.pipe(sourcemaps.init())//調試看到源文件，demo里面沒有加
.pipe(uglify())
.pipe(rev())
.pipe(sourcemaps.write("./"))//調試看到源文件，demo里面沒有加
.pipe(gulp.dest(folder.dist + 'js'))
.pipe(rev.manifest())
.pipe(gulp.dest(folder.dist + 'js/rev'));

});

gulp.task("html", function () {
var out = folder.dist;
return gulp
.src([
folder.dist + '**/*.json',
folder.src + "html/*.html",
folder.src + "html/*.ico", // favicons
folder.src + "html/*.png"
])

.pipe(fileinclude({
prefix: '@@',
basepath: '@file',
indent: true
}))
.pipe(revCollector())
.pipe(gulp.dest(out));
});
var middleware = proxyMiddleware('/api', {
target: 'http://localhost:8080',//代理目標地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
},
logLevel: 'debug'
});

// live browser loading
gulp.task("browserSync", function () {
browsersync.init({
server: {
baseDir: folder.dist,
index: 'login.html', // 指定默認打開的文件
middleware: middleware
},
port: 8081
});
});

// watch all changes
gulp.task("watch", function () {
gulp.watch(folder.src + "html/**", ["html", browsersync.reload]);
gulp.watch(folder.src + "assets/images/**/*", [
"imageMin",
browsersync.reload
]);
gulp.watch(folder.src + "scss/**/*", ["scss", browsersync.reload]);
gulp.watch(folder.src + "js/**/*", ["js", browsersync.reload]);
gulp.watch(folder.src + "css/*", ["css", browsersync.reload]);
});
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) => `${filename}-${hash}${ext}`);

更新為：return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

17行 return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '') + 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' ),

更新為 regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),
————————————————
版權聲明：本文為CSDN博主「雨輕傷」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/a707369808/java/article/details/83901503