Gulp 4 style injection

I’m attempting to use browser-sync with Gulp 4 and the new bs .stream() syntax, but bs is not preserving state and does a full refresh. Have you folks created a recipe / best practice for gulp v4 yet, so I can compare notes. Thanks for this awesome tool.

[JamesJosephFinn]

@iliakan sure:

var config = {
    server: {
        baseDir: './dev/'
    },
    files: [
        './dev/*.css'
    ],
    browser: 'google chrome canary',
    notify: false
};

gulp.task('browserSync', function() {
    browserSync.init(config);
});

and then a separate file for css task setup:

var config = {
    src: './src/css/styles.css',
    dest: {
        dev: './dev/'
    }
};

gulp.task('css:dev', function() {
    return gulp
        .src(config.src)
        .pipe(foo()) // whatever you're into
        .pipe(gulp.dest(config.dest.dev));
});

watching is a joy in gulp4:

var config = {
    paths: {
        css: './src/css/**/*'
    }
};

gulp.task('watch:css', function() {
    return gulp.watch(config.paths.css,
        gulp.series('css:dev'));
});

gulp.task('watch', gulp.parallel('watch:css'));

and then the default task… I’ve only shown css related stuff above, to keep this a simple illustration of live style injection using browser-sync and gulp4:

gulp.task('default',
    gulp.series(
        'clean:dev',
        gulp.parallel(
            'copy:dev', 'html:dev', 'css:dev',
            'js:dev', 'svgSymbol:dev', 'svg:dev'
        ),
        gulp.parallel('watch', 'browserSync')
    )
);

[JamesJosephFinn]

Fixed. Here’s where I went wrong:

The browser-sync constructor takes an options object, which can include a files array. Most of the tutorials I’ve read, including the gulpfile for Google’s very own Web Starter Kit, do not include this. As it turns out, this is required for style injection to preserve state.

Furthermore, do not pass .stream() or .reload() as the final pipe in your styles task. It is not needed, and will short circuit style injection, forcing a full refresh.

Finally, the browserSync process must not be terminated, and watch and browserSync tasks must execute in parallel in order for live style injection to take place.

Hope this helps anybody facing this issue.