First, you’ll need to install Browsersync & Gulp as development dependencies.

  npm install browser-sync gulp --save-dev

Then, use them within your gulpfile.js:

var gulp = require(‘gulp’); var browserSync = require(‘browser-sync’).create();

// Static server gulp.task(‘browser-sync’, function() { browserSync.init({ server: { baseDir: “./” } }); });

// or…

gulp.task(‘browser-sync’, function() { browserSync.init({ proxy: “yourlocal.dev” }); });

SASS + CSS Injecting

Streams are supported in Browsersync, so you can call reload at specific points during your tasks and all browsers will be informed of the changes. Because Browsersync only cares about your CSS when it’s finished compiling - make sure you call .stream() after gulp.dest

var gulp = require(‘gulp’); var browserSync = require(‘browser-sync’).create(); var sass = require(‘gulp-sass’);

// Static Server + watching scss/html files gulp.task(‘serve’, [‘sass’], function() {

browserSync.init({
    server: "./app"
});

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

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

gulp.task(‘default’, [‘serve’]);