Does Source-Maps in Style Tags Work

Why isn't Chrome seeing my css source map?

Yes, you are correct @Mark Weston - it was an issue with gulp-autoprefixer:
Turns out that gulp-autoprefixer was stripping out the /*# sourceMappingURL=style.css.map */ comment at the bottom of my css file.

This is an open issue with gulp-autoprefixer: https://github.com/sindresorhus/gulp-autoprefixer/issues/1

Correct type for source map files in script html tag

Well, if for any reason you will need to include such type of file I would suggest you to use

application/json

Here is what guys from getbootstrap.com are doing:

How to stop sourcemaps/usemin from appending css .map link tag to output?

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.

Chrome not loading CSS source maps?

You can try the following steps:

1- delete the map file and regenerate it again.

2- Using the chrome inspector, go to Settings > General and then click on the button "Restore defaults and reload"

Source Maps on Production. Are they necessary?

No, you only need source maps if you want to use them to debug the code.

---

Side note: Don't worry about the //# sourceMappingURL=... line in the file (if it survives your minification process). Browsers will only attempt to download the source map if you open dev tools and go to the code panel, so you won't be getting 404s for the missing maps in normal use. It's not ideal, and hopefully your process removes them, but if they're there it's mostly harmless. Of course, if someone did open the dev tools and go to the code panel, yes, the browser would try to get the file (and presumably fail, as you haven't put them on production).

---

Related Topics