Browser-sync: Source maps trigger full page refresh.

[greypants]

Looks like source maps are triggering a full page reload when enabled in gulp-ruby-sass. See this issue: https://github.com/greypants/gulp-starter/issues/38

I'm assuming it's because the task creates two files: app.css and app.css.map, and only css files and images are flagged for live injection. Just a heads up.

[shakyShane]

This is doing exactly as expected. You're telling BrowserSync to watch all your files...

https://github.com/greypants/gulp-starter/blob/master/gulp/tasks/browserSync.js#L5

The solution is to be more specific with your globs, like

browserSync({
    files: ['build/css/*.css', 'build/*.html']
    server: {
      baseDir: ['build', 'src']
    }
  });

etc.

[greypants]

You're right, my bad. I realized some things weren't set up right shortly after I posted. However, the issue still stands if you want to trigger stylesheet injection from the stream instead of using the files option (which is what I've been doing on more recent projects).

browserSync({
    server: {
      baseDir: ['build', 'src']
    }
  });

gulp.task('sass', function () {
  return gulp.src('src/sass/*.{sass, scss}')
    .pipe(sass({
      sourcemap: true,
      sourcemapPath: '../sass'
    }))
    .pipe(gulp.dest('build'))
    .pipe(browserSync.reload({stream: true}));
});

Which makes sense. Just not ideal. I suppose it'd be easy enough to filter the .map file out of the stream before piping to reload. Or just watch specific files in the build folder like you said.

Thanks for the quicky reply.

[shakyShane]

http://www.browsersync.io/docs/gulp/#gulp-sass-maps

[shakyShane]

But again, I've found the best solution is normally to be super-specific about the files you watch. This has the added benefit of better performance too :)

[greypants]

haha. I'll just see myself out. Thanks.

[fr-olivier]

Hello,

I have the exact same issue: when my sourcemaps are generated, the full page reloads, instead of doing a css injection.

I tried to make browerSync target specific files or pass a "ignored" option in watchOptions, but it still fully reload the page:

browserSync.init({
    proxy: "http://localhost:8888/css-injection",
    files: ['css/main.css', '*.html'],
    watchOptions: {
        // ignoreInitial: true,
        ignored: '*.map'
    }
});

Someone has an idea how to solve this?
Thanks a lot :)

[shakyShane]

@fr-olivier are you using with gulp/grunt ?

[fr-olivier]

With gulp

[shakyShane]

Please show the entire gulp file

[fr-olivier]

Hello shakyShane,

Here is the complete gulpfile I use:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
// var sass        = require('gulp-sass');
// var less = require('gulp-less-sourcemap');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');

gulp.task('serve', ['less'], function() {
    browserSync.init({
        proxy: "http://localhost:8888/css-injection",
    });

    gulp.watch("less/*.less", ['less']);
    gulp.watch("*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("css"))
        .pipe(browserSync.stream());
});

gulp.task('less', function() {
    return gulp.src("less/*.less")
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(sourcemaps.write('../sourcemaps'))
        .pipe(gulp.dest("css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

I can create a repo if you want to reproduce the exact same situation. I noticed that I still get the same issue if I use sass instead of less, and gulp-less-sourcemap instead of gulp-sourcemaps.
But if I comment the sourcemap generation line .pipe(sourcemaps.write('../sourcemaps')), then the css injection works as expected.

[fr-olivier]

Hello,

Just to know, should I open another issue?

Have a nice day,
François

[nirazul]

@fr-olivier
browserSync does a full page reload when it gets anything else than css files into browserSync.stream();. Make sure to filter out your *.map files before entering this line:

var filter = require('gulp-filter');

<...>
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(sourcemaps.write('../sourcemaps'))
        .pipe(gulp.dest("css"))
        // the follwing line lets through only files with a *.css extension
        .pipe(filter(['**/*.css']))  
        .pipe(browserSync.stream());

[fr-olivier]

Hello @Nirazul,

Thank you for your reply, when I use your code, I get an error ReferenceError: filter is not defined, do I need another npm module?

[davidlemaitre]

@fr-olivier You need gulp-filter module. Or you can use the "match" property to filter :

gulp.task('less', function() {
    return gulp.src("less/*.less")
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(sourcemaps.write('../sourcemaps'))
        .pipe(gulp.dest("css"))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

[camilocls]

@davidlemaitre this work perfect, thanks!

[petebarr]

@Nirazul That filter worked a treat, ta! I was starting to pull my hair out.

[Pistil-Studio]

@davidlemaitre Perfect Thx a lot

[mhchen]

I just ran into this exact issue. I feel like this might warrant being added to the documentation. I'd be happy to open a PR if you agree.

[qm3ster]

Which is better?

files: ['build/css/*.css', 'build/*.html']
files: '@(build/css/*.css|build/*.html)'
files: 'build/**/*.@(css|html)'