如何阻止 sourcemaps/usemin 将 css .map <link> 标记附加到输出?
How to stop sourcemaps/usemin from appending css .map <link> tag to output?
gulp-usemin 正在生成并附加 css sourcemap link 标记以输出 html,但不是为 js 做的。如何阻止它附加 sourcemap 标签?
Gulp 任务:
gulp.task('build', function () {
return gulp.src('templates/**')
.pipe(usemin({
css: [sourcemaps.init({ loadMaps: true }), 'concat', cleanCss(), rev(), sourcemaps.write('./')],
js: [sourcemaps.init({ loadMaps: true }), 'concat', uglify(), rev(), sourcemaps.write('./')]
}))
.pipe(gulp.dest('public'));
});
来源HTML:
<!-- build:css css/style.min.css -->
<link href="css/main.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- endbuild -->
<!-- build:js js/script.min.js -->
<script src="js/main.js"></script>
<script src="js/script.js"></script>
<!-- endbuild -->
这是结果输出。注意额外的 sourcemap css link 标签,但是 JS 地图没有相应的 sourcemap 脚本标签。为什么会这样以及如何停止为 css 插入 sourcemap 标签?
<link rel="stylesheet" href="css/style-cd92eb4ce7.min.css.map" media="screen"/>
<link rel="stylesheet" href="css/style-cd92eb4ce7.min.css" media="screen"/>
<script src="js/script-602bf332b2.min.js"></script>
如果您查看 gulp-usemin
的源代码,您就会明白为什么这适用于 JS 但不适用于 CSS。 gulp-usemin
explicitly makes sure to only create <script>
tags for files that end in .js
. There is no such check 对于 CSS。
这可能是 gulp-usemin
维护者的疏忽,因此您应该确保让他们知道 issue tracker.
如果您绝对没有其他选择并且问题在 gulp-usemin
本身没有解决,这里有一个解决方法:
var through = require('through2').obj;
var path = require('path');
var writeAndRemoveSourceMaps = through(function(file, enc, cb) {
if (path.extname(file.path) == '.map') {
gulp.dest('public').write(file, enc, cb);
return;
}
this.push(file);
cb();
});
gulp.task('build', function () {
return gulp.src('templates/**')
.pipe(usemin({
css: [
sourcemaps.init({ loadMaps: true }),
'concat',
cleanCss(),
rev(),
sourcemaps.write('./'),
writeAndRemoveSourceMaps // FINAL STAGE IN PIPELINE
],
js: [
sourcemaps.init({ loadMaps: true }),
'concat',
uglify(),
rev(),
sourcemaps.write('./')
]
}))
.pipe(gulp.dest('public'));
});
上面添加了另一个处理阶段 writeAndRemoveSourceMaps
到 css
管道,就在 sourcemaps.write()
将 .map
文件推送到流之后。此阶段手动将 .map
文件写入目标目录,然后再次将其从流中删除,这样它就无法到达 gulp-usemin
并且不会为它创建 <link>
标记。
感谢 Sven 的回答,我能够提出问题,维护者几乎立即通过 this commit 发布了修复。该问题自 v.0.3.25
.
起不再存在
gulp-usemin 正在生成并附加 css sourcemap link 标记以输出 html,但不是为 js 做的。如何阻止它附加 sourcemap 标签?
Gulp 任务:
gulp.task('build', function () {
return gulp.src('templates/**')
.pipe(usemin({
css: [sourcemaps.init({ loadMaps: true }), 'concat', cleanCss(), rev(), sourcemaps.write('./')],
js: [sourcemaps.init({ loadMaps: true }), 'concat', uglify(), rev(), sourcemaps.write('./')]
}))
.pipe(gulp.dest('public'));
});
来源HTML:
<!-- build:css css/style.min.css -->
<link href="css/main.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- endbuild -->
<!-- build:js js/script.min.js -->
<script src="js/main.js"></script>
<script src="js/script.js"></script>
<!-- endbuild -->
这是结果输出。注意额外的 sourcemap css link 标签,但是 JS 地图没有相应的 sourcemap 脚本标签。为什么会这样以及如何停止为 css 插入 sourcemap 标签?
<link rel="stylesheet" href="css/style-cd92eb4ce7.min.css.map" media="screen"/>
<link rel="stylesheet" href="css/style-cd92eb4ce7.min.css" media="screen"/>
<script src="js/script-602bf332b2.min.js"></script>
如果您查看 gulp-usemin
的源代码,您就会明白为什么这适用于 JS 但不适用于 CSS。 gulp-usemin
explicitly makes sure to only create <script>
tags for files that end in .js
. There is no such check 对于 CSS。
这可能是 gulp-usemin
维护者的疏忽,因此您应该确保让他们知道 issue tracker.
如果您绝对没有其他选择并且问题在 gulp-usemin
本身没有解决,这里有一个解决方法:
var through = require('through2').obj;
var path = require('path');
var writeAndRemoveSourceMaps = through(function(file, enc, cb) {
if (path.extname(file.path) == '.map') {
gulp.dest('public').write(file, enc, cb);
return;
}
this.push(file);
cb();
});
gulp.task('build', function () {
return gulp.src('templates/**')
.pipe(usemin({
css: [
sourcemaps.init({ loadMaps: true }),
'concat',
cleanCss(),
rev(),
sourcemaps.write('./'),
writeAndRemoveSourceMaps // FINAL STAGE IN PIPELINE
],
js: [
sourcemaps.init({ loadMaps: true }),
'concat',
uglify(),
rev(),
sourcemaps.write('./')
]
}))
.pipe(gulp.dest('public'));
});
上面添加了另一个处理阶段 writeAndRemoveSourceMaps
到 css
管道,就在 sourcemaps.write()
将 .map
文件推送到流之后。此阶段手动将 .map
文件写入目标目录,然后再次将其从流中删除,这样它就无法到达 gulp-usemin
并且不会为它创建 <link>
标记。
感谢 Sven 的回答,我能够提出问题,维护者几乎立即通过 this commit 发布了修复。该问题自 v.0.3.25
.