Gulp Boilerplate

gulpfile.js

// File Paths
var paths = {
  input: 'src/**/*',
  output: 'dist/',
  js: {
    input: 'src/js/**/*.js',
    output: 'dist/js/'
  },
  css: {
    input: 'src/scss/**/*.scss',
    output: 'dist/css/'
  },
  img: {
    input: 'src/img/**/*.{svg,jpg,jpeg,png}',
    output: 'dist/img/'
  },
  html: {
    input: 'src/**/*.html',
    output: 'dist/'
  },
  reload: './dist/'
};

// Gulp Plugins and Packages
var {gulp, src, dest, watch, series, parallel} = require('gulp');
const del = require('del');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const optimizejs = require('gulp-optimize-js');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const imagemin = require('gulp-imagemin');
const browserSync = require('browser-sync').create();


// Clear Dist Folder
function clearDist(cb) {
del.sync([
    paths.output
]);
cb();
}

// Minify and Optimize JS
function js(cb) {
  return src(paths.js.input)
    .pipe(uglify())
    .pipe(optimizejs())
    .pipe(rename({suffix: '.min'}))
    .pipe(dest(paths.js.output))
    .pipe(browserSync.stream());
  cb();
}

// Compile, Minify and Prefix SCSS
function css(cb) {
  return src(paths.css.input)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(rename({suffix: '.min'}))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write('./'))
    .pipe(dest(paths.css.output))
    .pipe(browserSync.stream());
  cb();
}

// Optimize SVG
function img(cb) {
  return src(paths.img.input)
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}),
      imagemin.jpegtran({progressive: true}),
      imagemin.optipng({optimizationLevel: 5}),
      imagemin.svgo({
        plugins: [
          {removeViewBox: true},
          {cleanupIDs: true}
        ]
      })
    ]))
    .pipe(dest(paths.img.output))
    .pipe(browserSync.stream());
}

// Copy HTML files to Dist Folder
function copyHTML(cb) {
return src(paths.html.input)
    .pipe(dest(paths.html.output));
cb();
}

// Start BrowserSync
function startServer(cb) {
  browserSync.init({
    server: {
      baseDir: paths.reload
    }
    });
}

// Reload BrowserSync
function reloadBrowser(done) {
  browserSync.reload();
  done();
}

function watchSource(done) {
  watch(paths.input, { ignoreInitial: false }, series(exports.build, reloadBrowser));
  done();
}

// Build
exports.build = series(clearDist, parallel(js, css, img, copyHTML));

// Serve
exports.default = series(exports.build, parallel(startServer, watchSource));