Как остановить sourcemaps/usemin от добавления тега css .map <link> к выводу?

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 -->

И это результат вывода. Обратите внимание на дополнительный тег css link sourcemap, но для JS-карт нет соответствующего тега сценария sourcemap. Почему так и как мне перестать вставлять тег sourcemap для css??

<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>

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 к css трубопровод, сразу после sourcemaps.write() подтолкнул .map файл в поток. Этот этап вручную записывает .map файл в каталог назначения, а затем снова удаляет его из потока, чтобы он не мог достичь gulp-usemin и нет <link> тег для него создан.

Благодаря ответу Свена я смог подать проблему, и сопровождающий выпустил исправление с помощью этого коммита почти сразу. Проблема больше не присутствует с v.0.3.25,

Другие вопросы по тегам