Simple gulp configuration with Pug, SCSS, ES6 and BrowserSync.

gulpfile.basic.js

'use strict';

var gulp        = require('gulp');
var gutil       = require('gulp-util');
var sass        = require('gulp-sass');
var pug         = require('gulp-pug');
var babel       = require('gulp-babel');
var livereload  = require('gulp-livereload');
var zip         = require('gulp-zip');
var rev         = require('gulp-rev');
var del         = require('del');
var browserSync = require('browser-sync');
var spa         = require('browser-sync-spa');

browserSync.use(spa());

var paths = {
  src: 'src',
  dist: 'dist'
};

var pugFiles = {
  src: paths.src + '/views/**/!(_)*.pug',
  dist: paths.dist,
  watch: paths.src + '/views/**/*.pug'
}

var htmlFiles = {
  watch: paths.dist + '/**/*.html'
}

var scssFiles = {
  src: paths.src + '/scss/index.scss',
  dist: paths.dist + '/css/',
  watch: paths.src + '/scss/**/*.scss'
}

var jsFiles = {
  src: paths.src + '/js/**/*.js',
  dist: paths.dist + '/js',
  watch: paths.src + '/js/**/*.js'
}

var assetsFiles = {
  src: paths.src + '/assets/**/*.*',
  dist: paths.dist,
  watch: paths.src + '/assets/**/*.*'
}

var zipFiles = {
  src: paths.dist + '/**/*.*',
  dist: './zip/',
  name: 'ov-theme.zip'
}

// Compiles pug
gulp.task('pug', function() {
  gulp.src(pugFiles.src)
    .pipe(pug({
      locals: {},
      pretty: true
    }))
    .pipe(gulp.dest(pugFiles.dist))
});

// Compiles SCSS
gulp.task('sass', function() {
  return gulp.src(scssFiles.src)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(scssFiles.dist))
    .pipe(browserSync.stream());
});

// Compiles Vanilla JS
gulp.task('js', () => {
  return gulp.src(jsFiles.src)
    .pipe(gulp.dest(jsFiles.dist))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// Compiles ES6 JS
gulp.task('js:babel', () => {
  return gulp.src(jsFiles.src)
    .pipe(babel({ presets: ['es2015'] }))
    .pipe(gulp.dest(jsFiles.dist));
});

// Inits Browser Sync server
function browserSyncServe(done) {
  browserSync.init({
    ghostMode: true,
    notify: false,
    server: {
      baseDir: paths.dist
    },
    open: true
  });
  done();
}

// Simple timeout to deal with Pug compiling lag
function reloadBrowserSyncPug() {
  setTimeout(reloadBrowserSync, 500);
}

// Reload Browser sync
function reloadBrowserSync() {
  browserSync.reload();
}

// Clean dist dir
function clean() {
  // return del([paths.dist + '/**/*/*.*', paths.dist + '/*', paths.dist]);
}

// Watch Task
gulp.task('watch', [], function() {
  gulp.watch(pugFiles.watch, ['pug', reloadBrowserSyncPug]);
  gulp.watch(scssFiles.watch, ['sass']);
  gulp.watch(jsFiles.watch, ['js']);
  gulp.watch(assetsFiles.watch, ['moveAssets', reloadBrowserSyncPug]);
});

// [npm run build] Default Task
gulp.task('default', ['clean', 'pug', 'sass', 'js', 'move']);

// [npm run build] Build Task
gulp.task('build', ['default']);

// [npm run serve] Serve Task
gulp.task('serve', ['default', 'watch', 'browsersync']);

// Browsersync Task
gulp.task('browsersync', browserSyncServe);

// Clean Task
gulp.task('clean', clean);

// Move assets task
gulp.task('moveassets', ['move']);

// Zip dist task
gulp.task('zip', () => {
  return gulp.src(zipFiles.src)
    .pipe(zip(zipFiles.name))
    .pipe(rev())
    .pipe(gulp.dest(zipFiles.dist));
});

// Move all assets task
gulp.task('move', () => {
  return gulp.src(assetsFiles.src)
    .pipe(gulp.dest(assetsFiles.dist));
});