1

gulp-usemin 正在生成并将 css sourcemap 链接标记附加到输出 html，但不适用于 js。如何阻止它附加 sourcemap 标签？

吞咽任务：

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 链接标签，但 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>
4

2 回答 2

2

如果您查看源代码，gulp-usemin您就会明白为什么这适用于 JS 而不适用于 CSS。gulp-usemin 明确确保只为以 .<script>结尾的文件创建标签.js。CSS没有这样的检查。

这可能是gulp-usemin维护者的疏忽，所以你应该确保在他们的问题跟踪器上让他们知道。

如果您绝对没有其他选择并且问题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到管道。此阶段手动将文件写入目标目录，然后再次将其从流中删除，使其无法到达并且不会为其创建标记。csssourcemaps.write().map.mapgulp-usemin<link>

于 2016-03-17T19:57:26.843 回答
0

感谢 Sven 的回答，我能够提出问题，并且维护人员 几乎立即通过此提交发布了修复程序。从 开始，该问题不再存在v.0.3.25。

于 2016-10-27T08:42:29.163 回答