Gulp 4 Sass BrowserSync Kickstart Example

gulpfile.js

// Requires Gulp v4.
// $ npm uninstall --global gulp gulp-cli
// $ rm /usr/local/share/man/man1/gulp.1
// $ npm install --global gulp-cli
// $ npm install
const { src, dest, watch, series, parallel } = require('gulp');
const browsersync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const sasslint = require('gulp-sass-lint');
const cache = require('gulp-cached');
const notify = require('gulp-notify');
const beeper = require('beeper');

// Compile CSS from Sass.
function buildStyles() {
  return src('scss/styles.scss')
    .pipe(plumbError()) // Global error handler through all pipes.
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7']))
    .pipe(sourcemaps.write())
    .pipe(dest('css/'))
    .pipe(browsersync.reload({ stream: true }));
}

// Watch changes on all *.scss files, lint them and
// trigger buildStyles() at the end.
function watchFiles() {
  watch(
    ['scss/*.scss', 'scss/**/*.scss'],
    { events: 'all', ignoreInitial: false },
    series(sassLint, buildStyles)
  );
}

// Init BrowserSync.
function browserSync(done) {
  browsersync.init({
    proxy: 'blog.localhost', // Change this value to match your local URL.
    socket: {
      domain: 'localhost:3000'
    }
  });
  done();
}

// Init Sass linter.
function sassLint() {
  return src(['scss/*.scss', 'scss/**/*.scss'])
    .pipe(cache('sasslint'))
    .pipe(sasslint({
      configFile: '.sass-lint.yml'
    }))
    .pipe(sasslint.format())
    .pipe(sasslint.failOnError());
}

// Error handler.
function plumbError() {
  return plumber({
    errorHandler: function(err) {
      notify.onError({
        templateOptions: {
          date: new Date()
        },
        title: "Gulp error in " + err.plugin,
        message:  err.formatted
      })(err);
      beeper();
      this.emit('end');
    }
  })
}

// Export commands.
exports.default = parallel(browserSync, watchFiles); // $ gulp
exports.sass = buildStyles; // $ gulp sass
exports.watch = watchFiles; // $ gulp watch
exports.build = series(buildStyles); // $ gulp build

package.json

{
    "name": "gulp4_sass_browsersync",
    "description": "Gulp 4 Sass BrowserSync Kickstart Example",
    "author": {
        "name": "Norman Kämper-Leymann",
        "mail": "[email protected]"
    },
    "repository": {
        "type": "git",
        "url": "[email protected]:8f6a75e8ad5055276a71d2901813726e.git"
    },
    "license": "MIT",
    "dependencies": {
        "autoprefixer": "^9.4.6",
        "beeper": "^1.1.1",
        "browser-sync": "^2.26.3",
        "gulp": "^4.0.0",
        "gulp-autoprefixer": "^6.0.0",
        "gulp-cached": "^1.1.1",
        "gulp-notify": "^3.2.0",
        "gulp-plumber": "^1.2.1",
        "gulp-sass": "^4.0.2",
        "gulp-sass-lint": "^1.4.0",
        "gulp-shell": "^0.6.5",
        "gulp-sourcemaps": "^2.6.4",
    },
    "scripts": {
        "postinstall": "./node_modules/.bin/gulp build"
    }
}