Writing to external css sourcemap triggers a page refresh

[RustyDev]

If I inline the sourcemap in my css file, livereload works as expected and injects the css changes in the page without a refresh. Once I use external sourcemaps, I see this output and the page is refreshed. Notice that there are two reloads happening.

[12:07:20] /Volumes/Dev/angular/css/local.css.map reloaded.
[12:07:20] gulp-notify: [Gulp notification] Compiled CSS
[12:07:20] /Volumes/Dev/angular/css/local.css reloaded.
[12:07:20] gulp-notify: [Gulp notification] Compiled CSS

Here's my task:

gulp.task('sass', function() {

    gulp.src(src.sassLocal)
        .pipe(plugins.sass({
            outputStyle: 'expanded'
        }).on('error', plugins.sass.logError))
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sourcemaps.write('./'))
        .pipe(gulp.dest('./angular/css'))
        .pipe(plugins.livereload())
        .pipe(plugins.notify('Compiled CSS'))

})

[RustyDev]

Found a workaround by filtering out the sourcemap before livereloading.

    gulp.src(src.local)
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sass({outputStyle: 'expanded'}))
        .pipe(plugins.sourcemaps.write('./'))
        .pipe(gulp.dest('./angular/css'))
        .pipe(plugins.filter("**/*.css"))
        .pipe(plugins.livereload())
        .pipe(plugins.notify('Compiled CSS'))

[bryanburgers]

@RustyDev For posterity, what module has the filter method?

[RustyDev]

https://www.npmjs.com/package/gulp-filter

[tylergraf]

Thank you! I just spent 4 hours trying to figure this out.

[nathanredblur]

Not good at all. because you can not see a right source map in the navigator :(

[RustyDev]

It's true, it's off by one save in the navigator but for me that's not really an issue. I guess it's the lesser of two evils.

[jamesplease]

it's off by one save in the navigator

Are you able to get it to refresh the source map through this method? For me, it's never updating the mapped CSS after any number of saves. So if I make n changes, I'm n changes behind in the mapped CSS file.

I wonder if it's technically possible for the source map to get updated in devtools without a hard refresh. I don't know too much about the internals of how the "soft" update works...it's an interesting question for someone who has time to pursue it further!

[yujiahuang]

Instead of filtering, I write the sourcemap separately, after livereload.

gulp.task('sass', function() {
    gulp.src(src.sassLocal)
        .pipe(plugins.sass({
            outputStyle: 'expanded'
        }).on('error', plugins.sass.logError))
        .pipe(plugins.sourcemaps.init())
        .pipe(gulp.dest('./angular/css'))
        .pipe(plugins.livereload())
        .pipe(plugins.sourcemaps.write('./')) // Move this line here
        .pipe(gulp.dest('./angular/css'))     // and write file
        .pipe(plugins.notify('Compiled CSS'))
})

It will still be one save behind. However I can live with it, because I never really rely on the exact line number.

[0x80]

If inline source maps don't trigger the reloads, wouldn't it be a solution to use inline source maps in development and external files in production?

I'm doing this:

    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    // non-inline sourcemaps trigger a page refresh so we keep them inline
    // for development
    .pipe(gulpif(isProduction, sourcemaps.write('.'), sourcemaps.write()))
    .pipe(gulp.dest(appDest))
    .pipe(livereload())