Update build library and tweak

gulpfile.js

@@ -1,60 +1,94 @@
-var gulp = require('gulp'),
-    concat = require('gulp-concat'),
-    uglify = require('gulp-uglify'),
-    rename = require('gulp-rename'),
-    sass = require('gulp-ruby-sass'),
-    autoprefixer = require('gulp-autoprefixer'),
-    browserSync = require('browser-sync').create();
+const { src, series, parallel, watch, dest } = require('gulp'),
+  autoprefixer = require('gulp-autoprefixer'),
+  cleanCSS = require('gulp-clean-css'),
+  concat = require('gulp-concat'),
+  notify = require('gulp-notify'),
+  plumber = require('gulp-plumber'),
+  rename = require('gulp-rename'),
+  sass = require('gulp-sass'),
+  sourcemaps = require('gulp-sourcemaps'),
+  uglify = require('gulp-uglify'),
+  browserSync = require('browser-sync').create()
 
-var DEST = 'build/';
+const DEST = 'build/'
 
-gulp.task('scripts', function() {
-    return gulp.src([
-        'src/js/helpers/*.js',
-        'src/js/*.js',
-      ])
-      .pipe(concat('custom.js'))
-      .pipe(gulp.dest(DEST+'/js'))
-      .pipe(rename({suffix: '.min'}))
-      .pipe(uglify())
-      .pipe(gulp.dest(DEST+'/js'))
-      .pipe(browserSync.stream());
-});
+const buildJs = done => {
+  src(['src/js/helpers/*.js', 'src/js/*.js'], { sourcemaps: true })
+    .pipe(
+      plumber({
+        errorHandler: notify.onError('<%= error.message %>')
+      })
+    )
+    .pipe(concat('custom.js'))
+    .pipe(dest(DEST + '/js'))
+    .pipe(uglify())
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(dest(DEST + '/js', { sourcemaps: './maps' }))
+    .pipe(browserSync.stream())
+  done()
+}
+buildJs.displayName = 'Build JS'
 
-// TODO: Maybe we can simplify how sass compile the minify and unminify version
-var compileSASS = function (filename, options) {
-  return sass('src/scss/*.scss', options)
-        .pipe(autoprefixer('last 2 versions', '> 5%'))
-        .pipe(concat(filename))
-        .pipe(gulp.dest(DEST+'/css'))
-        .pipe(browserSync.stream());
-};
+const buildCss = done => {
+  src('src/scss/*.scss', { sourcemaps: true })
+    .pipe(sourcemaps.init())
+    .pipe(
+      plumber({
+        errorHandler: notify.onError('<%= error.message %>')
+      })
+    )
+    .pipe(
+      sass({
+        outputStyle: 'expanded'
+      })
+    )
+    .pipe(concat('custom.css'))
+    .pipe(
+      autoprefixer({
+        browsers: ['last 2 versions']
+      })
+    )
+    .pipe(dest(DEST + '/css'))
+    .pipe(cleanCSS())
+    .pipe(
+      rename({
+        suffix: '.min'
+      })
+    )
+    .pipe(sourcemaps.write('./maps'))
+    .pipe(dest(DEST + '/css'))
+    .pipe(browserSync.stream())
+  done()
+}
+buildCss.displayName = 'Build CSS'
 
-gulp.task('sass', function() {
-    return compileSASS('custom.css', {});
-});
+const startBrowserSync = done => {
+  browserSync.init({
+    port: 8080,
+    server: {
+      baseDir: './'
+    },
+    startPath: './production/index.html',
+    reloadOnRestart: true
+  })
+  done()
+}
+startBrowserSync.displayName = 'Start Browser Sync'
 
-gulp.task('sass-minify', function() {
-    return compileSASS('custom.min.css', {style: 'compressed'});
-});
-
-gulp.task('browser-sync', function() {
-    browserSync.init({
-        server: {
-            baseDir: './'
-        },
-        startPath: './production/index.html'
-    });
-});
-
-gulp.task('watch', function() {
-  // Watch .html files
-  gulp.watch('production/*.html', browserSync.reload);
-  // Watch .js files
-  gulp.watch('src/js/*.js', ['scripts']);
-  // Watch .scss files
-  gulp.watch('src/scss/*.scss', ['sass', 'sass-minify']);
-});
+const watchAll = done => {
+  const browserReload = () => {
+    browserSync.reload()
+    done()
+  }
+  watch('src/scss/*.scss').on('change', series(buildCss, browserReload))
+  watch('src/js/*.js').on('change', series(buildJs, browserReload))
+  watch('production/*.html').on('change', series(browserReload))
+}
+watchAll.displayName = 'Watch All'
 
 // Default Task
-gulp.task('default', ['browser-sync', 'watch']);
+exports.default = series(
+  parallel(buildJs, buildCss),
+  startBrowserSync,
+  watchAll
+)