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
+)