Gulp4.0+SASS4.0+BrowserSync2.26

References

• Gulp
• SASS
• BrowserSync

Code

• compile SASS when css changes
• reload when scss files or php files changes

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
var sourcemaps = require('gulp-sourcemaps');
sass.compiler = require('node-sass');

// The `clean` function is not exported so it can be considered a private task.
// It can still be used within the `series()` composition.
function clean(cb) {
  // body omitted
  cb();
}

function scss() {
  return gulp.src('scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream())
}

function browsersync() {
  return browserSync.init(["scss/**/*.scss"], {
      proxy: "localhost",
    });
}

gulp.watch('scss/**/*.scss', { ignoreInitial: false }, scss)
    .on('change', browserSync.reload)
gulp.watch('./**/*.php').on('change', browserSync.reload);

exports.build = scss;
exports.default = gulp.series(browsersync, scss);