Buy

Sourcemaps only in Development

When we deploy, we're going to pass --production so that everything is minified like this. But when I do that, I don't want the sourcemaps to be there anymore. It's not a huge deal, but I'd rather not advertise my source files.

So now we have the opposite problem as before: we want to only run the sourcemaps when we're not in production. Add another config value called sourcemaps and set it to be not production:

31 lines gulpfile.js
... lines 1 - 8
var config = {
... lines 10 - 12
sourceMaps: !util.env.production
};
... lines 15 - 31

Make sense?

We can use this to only run the two sourcemaps line if config.sourcemaps is true. Instead of using util.noop() again, I want to show you another plugin called gulp-if. Go back and find it on the plugins page. Let's get this guy installed:

npm install gulp-if --save-dev

Go back and grab the require line:

31 lines gulpfile.js
var gulp = require('gulp');
... lines 2 - 6
var gulpif = require('gulp-if');
... lines 8 - 31

The whole point of this plugin is to help with the fact that we can't break up the pipe chain with if statements. With it, you can add gulpif() inside pipe(). The first argument is the condition to test - so config.sourcemaps. And if that's true, we'll call sourcemaps.init(). Do the same thing down for sourcemaps.write(): gulpif, config.sourcemaps, then sourcemaps.write('.'):

31 lines gulpfile.js
... lines 1 - 16
gulp.src(config.assetsDir+'/'+config.sassPattern)
.pipe(gulpif(config.sourceMaps, sourcemaps.init()))
... lines 19 - 21
.pipe(gulpif(config.sourceMaps, sourcemaps.write('.')))
... lines 23 - 31

That pipe chain is off the hook! Go back and run just gulp:

gulp

We should see the non-minified version with sourcemaps. And that's what we've got! Now add --production:

gulp --production

No more sourcemaps!

Leave a comment!

  • 2017-05-18 weaverryan

    Hi Richie Hamburg!

    Sorry for my slow reply! And I'm afraid you give me too much credit - this is a tough one! I have not experienced this issue before, but it looks like you're not alone: https://discourse.roots.io/... and https://github.com/sass/nod.... Unfortunately, it doesn't look like there's a "for sure" workaround :/. You could of course compile your Bootstrap SASS into CSS and then include the bootstrap CSS in your gulpfile, but it's kind of a bummer.

    Here on KnpU, we've actually migrated to webpack, which we're very happy with. Unfortunately, our tutorial on it - http://knpuniversity.com/sc... - hasn't been released yet. There's also a tool that will come out pretty soon to make webpack easier to work with. I know, that's not that helpful - it's a lot of "we use webpack, but things that make it easier aren't ready yet". But soon!

    Cheers!

  • 2017-05-15 Richie Hamburg

    If I want to use bootstrap mixins in my stylesheet (css is now a scss) by importing bootstrap.scss eg

    @import "../../../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap";

    I get all sorts of errors (below). (intellij)

    Q1: Why cant I import "/vendor/bower_components.." ? It says file not found. Is there someway to configure the "root" for imports?
    Q2: what is the correct approach to making my style.css a style.scss which imports bootstrap.scss? Do I need to copy (recursively the bootstrap-sass files)? If so how to do this recursively? This is not recursive. How to modify the app.copy function?

    app.copy (
    config.bowerDir+'/bootstrap-sass/assets/stylesheets/*',
    'app/Resources/assets/sass'
    );

    This might be a bit confusing but I suspect my confused ramblings might be understood by your experienced self!

    errors involvoing sourcemaps when using a scss file which import bootstrap.scss:

    /home/rgr/development/gitprojects/vollfilm-new/node_modules/source-map/lib/source-map-generator.js:277
    throw new Error('Invalid mapping: ' + JSON.stringify({
    ^

    Error: Invalid mapping: {"generated":{"line":10903,"column":17},"source":"../../../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss","original":{"line":14,"column":-13},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (/home/rgr/development/gitprojects/vollfilm-new/node_modules/source-map/lib/source-map-generator.js:277:13)
    at SourceMapGenerator_addMapping [as addMapping] (/home/rgr/development/gitprojects/vollfilm-new/node_modules/source-map/lib/source-map-generator.js:101:12)
    at /home/rgr/development/gitprojects/vollfilm-new/node_modules/concat-with-sourcemaps/index.js:60:28
    at Array.forEach (native)
    at SourceMapConsumer_eachMapping [as eachMapping] (/home/rgr/development/gitprojects/vollfilm-new/node_modules/source-map/lib/source-map-consumer.js:155:14)
    at Concat.add (/home/rgr/development/gitprojects/vollfilm-new/node_modules/concat-with-sourcemaps/index.js:58:18)
    at DestroyableTransform.bufferContents [as _transform] (/home/rgr/development/gitprojects/vollfilm-new/node_modules/gulp-concat/index.js:68:12)
    at DestroyableTransform.Transform._read (/home/rgr/development/gitprojects/vollfilm-new/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/home/rgr/development/gitprojects/vollfilm-new/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/home/rgr/development/gitprojects/vollfilm-new/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:338:64)
    r