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
