javascript - 使用 gulp 创建 .js、.min.js 和 .js.map 文件?
问题描述
我正在尝试利用 gulp 3.9 来缩小我的资源文件。
我在我的 gulpfile 中创建了两个不同的任务,如下所示
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
filter = require('gulp-filter'),
sourcemaps = require('gulp-sourcemaps'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify-es').default,
merge = require("merge-stream"),
del = require("del"),
bundleconfig = require("./bundleconfig.json");
gulp.task("min:js", function () {
var tasks = getBundles(regex.js).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
.pipe(filter('**/*.js'))
.pipe(concat(bundle.outputFileName))
.pipe(sourcemaps.write('../maps')) // shouldn't this create file.js.map file?
.pipe(gulp.dest("."))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write('../maps')) // shouldn't this create file.min.js.map file?
.pipe(gulp.dest("."));
});
return merge(tasks);
});
gulp.task("min:css", function () {
var tasks = getBundles(regex.css).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
.pipe(filter('**/*.css'))
.pipe(concat(bundle.outputFileName))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest("."))
.pipe(cssmin())
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest("."));
});
return merge(tasks);
});
但是,上面的代码似乎只生成 .min 和常规(非缩小)文件,而不是源映射文件。
每次执行“min:js”和“min:css”任务时,如何使用 Gulp 生成 3 个 js、css 和 sourcemap 文件?
解决方案
根据文档,您应该初始化源映射:
.pipe(sourcemaps.init())
在生成缩小的 js 案例中:
gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
.pipe(filter('**/*.js'))
.pipe(sourcemaps.init())
.pipe(concat(bundle.outputFileName))
.pipe(sourcemaps.write('../maps'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(".")) ;
并相应地更改您的 css 缩小。单击她以获取有关 sourcemap 的更多信息
推荐阅读
- javascript - 在按钮单击 Javascript 的索引上切换数组值
- scala - 如何为阻塞呼叫设置超时?
- python - 如何将散点图中的点显示为加号和减号?
- c# - 构建项目时面临的异常
- java - JSoup 从 html 页面获取表并将其转换为 JSON
- python - 手动清除 Python 缓存工具
- android - 如何从 Android 手机使用 Cordova Geolocation 插件获取地理位置?
- javascript - 在父组件中增加子组件时如何更新子组件?
- amazon-web-services - AWS - DecodeAuthorizationMessage 未授权解码消息
- powershell - 如何使用 powershell 中的函数更改变量的值?