gulp+sass+browsersync

gulpfile.js

// Gulp.js configuration
'use strict';

const
  // source and build folders
  dir = {
    src         : './src/',
    build       : './var/www/wp-content/themes/mytheme/'
  },
  // Gulp and plugins
  gulp = require('gulp'),
  gutil = require('gulp-util'),
  newer = require('gulp-newer'),
  imagemin = require('gulp-imagemin'),
  sass = require('gulp-sass'),
  postcss = require('gulp-postcss'),
  deporder = require('gulp-deporder'),
  concat = require('gulp-concat'),
  stripdebug = require('gulp-strip-debug'),
  uglify = require('gulp-uglify')
;

// Browser-sync
var browsersync = require('browser-sync').create();

// PHP settings
const php = {
  src           : dir.src + 'template/**/*.php',
  build         : dir.build
};

// copy PHP files
gulp.task('php', () => {
  return gulp.src(php.src)
  .pipe(newer(php.build))
  .pipe(gulp.dest(php.build));
});

// image settings
const images = {
  src         : dir.src + 'images/**/*',
  build       : dir.build + 'images/'
};

// image processing
gulp.task('images', () => {
  return gulp.src(images.src)
    .pipe(newer(images.build))
    .pipe(imagemin())
    .pipe(gulp.dest(images.build));
});

// CSS settings
var css = {
  src         : dir.src + 'scss/**/*.scss',
  watch       : dir.src + 'scss/**/*',
  build       : dir.build ,
  filename: 'style.css',
  sassOpts: {
    outputStyle     : 'nested',
    imagePath       : images.build,
    precision       : 3,
    errLogToConsole : true
  },
  processors: [
    require('postcss-assets')({
      loadPaths: ['images/'],
      basePath: dir.build,
      baseUrl: '/wp-content/themes/wptheme/'
    }),
    require('autoprefixer')({
      browsers: ['last 2 versions', '> 2%']
    }),
    require('css-mqpacker'),
    require('cssnano')
  ]
};

// CSS processing
gulp.task('css', ['images'], () => {
  return gulp.src(css.src)
    .pipe(sass(css.sassOpts))
    .pipe(postcss(css.processors))
    .pipe(gulp.dest(css.build ))
    .pipe(concat(css.filename))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});

// JavaScript settings
const js = {
  src         : dir.src + 'js/**/*',
  build       : dir.build + 'js/',
  filename    : 'scripts.js'
};

// JavaScript processing
gulp.task('js', () => {

  return gulp.src(js.src)
    .pipe(deporder())
    .pipe(concat(js.filename))
    .pipe(stripdebug())
    .pipe(uglify())
    .pipe(gulp.dest(js.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());

});

// run all tasks
gulp.task('build', ['php', 'css', 'js']);

// Browsersync options
const syncOpts = {
  proxy       : 'localhost:8888'
};


// browser-sync
gulp.task('browsersync', () => {

    browsersync.init(syncOpts);

});

// watch for file changes
gulp.task('watch', ['browsersync'], () => {

  // page changes
  gulp.watch(php.src, ['php']).on('change', browsersync.reload);

  // image changes
  gulp.watch(images.src, ['images']).on('change', browsersync.reload);

    // CSS changes
  gulp.watch(css.watch, ['css']).on('change', browsersync.reload);

  // JavaScript main changes
  gulp.watch(js.src, ['js']).on('change', browsersync.reload);

});

// default task
gulp.task('default', ['build', 'watch']);