Browser reload when .css.map file create/change

[kwolniak]

Browser is reload after css inject, is it necessary?

In gulpfile.js

//requires

var sStyleDir = './app/assets/scss',
    tStyleDir = './public/css';

var onError = function (err) {
    gutil.beep();
    console.log(err);
};

gulp.task('css', function () {
    return gulp.src(sStyleDir + '/main.scss')
        .pipe(plumber({ errorHandler: onError }))
        .pipe(sass({ loadPath: ['bower_components'], sourcemap: true }))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(tStyleDir))
        .pipe(browserSync.reload({stream:true}))
        ;
});

gulp.task('browser-sync', function () {
    browserSync.init(null, {
        proxy: "homestead.app:8000"
    });
});

gulp.task('default', ['css', 'browser-sync'], function () {
    gulp.watch(sStyleDir + '/**/*.scss', ['css']);
});

In console:

[23:12:38] Starting 'css'...
[BS] File Changed: main.css
[BS] Injecting file into all connected browsers...
[BS] File Changed: main.css.map
[BS] Reloading all connected browsers...
[23:12:39] Finished 'css' after 622 ms

[shakyShane]

You need to apply a filter before the stream hits reload to only pass through files you want injecting. (in this case, .css files) - use https://www.npmjs.org/package/gulp-filter to do this.

[kwolniak]

Thanks. Work like a charm!

.pipe(gulp.dest(tStyleDir))
.pipe(filter('**/*.css'))
.pipe(browserSync.reload({stream:true}))

[shakyShane]

[shakyShane]

Fancy doing a Pull Request on the Readme with that example? I think it'd be very helpful to others.