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_modulesgulp-revindex.js

134行：

manifest[originalFile] = revisionedFile;

更新为：

manifest[originalFile] = originalFile + '?v=' + file.revHash;

-- 2 

打开 node_modules ev-pathindex.js  

注意：原文这里的路径是打开nodemodulesgulp-rev odemodules ev-pathindex.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_modulesgulp-rev-collectorindex.js

40行：var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );

更新为：var cleanReplacement =  path.basename(json[key]).split('?')[0];

-- 4

打开node_modulesgulp-assets-revindex.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_modulesgulp-rev-collectorindex.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