1

gulp-usemin is generating and appending css sourcemap link tag to output html, but not doing for js. How do I stop it from appending the sourcemap tag?

Gulp task:

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'));
});

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

And this is the result output. Notice the extra sourcemap css link tag, but there is no respective sourcemap script tag for JS maps. Why is so and how do I stop inserting sourcemap tag for 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>
codneto
  • 2,319
  • 3
  • 24
  • 36

2 Answers2

2

If you look at the source code for gulp-usemin you can see why this works for JS but not for CSS. gulp-usemin explicitly makes sure to only create <script> tags for files that end in .js. There is no such check for CSS.

This might be an oversight on the part of the gulp-usemin maintainers, so you should make sure to let them know on their issue tracker.

In case you have absolutely no other option and the issue is not fixed in gulp-usemin itself, here's a workaround:

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'));
});

The above adds another processing stage writeAndRemoveSourceMaps to the css pipeline, right after sourcemaps.write() has pushed the .map file to the stream. This stage manually writes the .map file to the destination directory and then removes it from the stream again, so that it can't reach gulp-usemin and no <link> tag for it is created.

Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
0

Thanks to Sven's answer I was able to file an issue, and the maintainer released a fix via this commit almost immediately. The problem is no longer present as of v.0.3.25.

Tommy
  • 594
  • 5
  • 8