Upgrade to Gulp ^4.0

Author: giangmd

.gitignore

@@ -1,9 +1,49 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Users Environment Variables
+.lock-wscript
+
+# Garbage files
+.DS_Store
+**/*.DS_Store
+
+# Test results
+test.xunit
+
 # Build and Release Folders
 bin-debug/
 bin-release/
 
 # Other files and folders
 .settings/
 
-node_modules/
+# Folder destination build
 dist/
+
+#php-storm
+.idea

gulpfile.js

@@ -1,68 +1,79 @@
-var gulp = require('gulp'),
-    sass = require('gulp-sass'),
-    fileinclude = require('gulp-file-include'),
-    htmlmin = require('gulp-htmlmin'),
-    uglify = require('gulp-uglify'),
-    concat = require('gulp-concat'),
-    csso = require('gulp-csso'),
-    clean = require('gulp-rimraf'),
-    runSequence = require('run-sequence');
-
-gulp.task('clean', [], function() {
-    console.log("Clean all files in build folder");
-
-    return gulp.src("dist/*", { read: false }).pipe(clean());
-});
-
-gulp.task('sass', function() {
+"use strict";
+
+const del = require("del");
+const eslint = require("gulp-eslint");
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const fileinclude = require('gulp-file-include');
+const htmlmin = require('gulp-htmlmin');
+const uglify = require('gulp-uglify');
+const concat = require('gulp-concat');
+const csso = require('gulp-csso');
+
+function clean() {
+    console.log("Delete build folder");
+
+    return del(["./dist/"]);
+}
+
+function sassTask() {
     console.log("Sass task run");
 
-    gulp.src('src/scss/*.scss')
+    return gulp.src('src/scss/*.scss')
         .pipe(sass({outputStyle: 'compressed'}))
         .pipe(csso())
         .pipe(concat('style.min.css'))
         .pipe(gulp.dest('dist/css/'));
-});
+}
 
-gulp.task('css', function() {
-    console.log("Css task run");
+function styles() {
+    console.log("Styles task run");
 
-    gulp.src([
+    return gulp.src([
             'node_modules/bootstrap/dist/css/bootstrap.css',
             'node_modules/@fortawesome/fontawesome-free/css/all.css',
             'src/css/**/*.css'
         ])
         .pipe(csso())
         .pipe(concat('lib.min.css'))
         .pipe(gulp.dest('dist/css'));
-});
+}
 
-gulp.task('js', function() {
-    console.log("JS task run");
+function scriptsLint() {
+    return gulp
+        .src(["dist/js/**/*", "./gulpfile.js"])
+        .pipe(plumber())
+        .pipe(eslint())
+        .pipe(eslint.format())
+        .pipe(eslint.failAfterError());
+}
 
-    gulp.src([
+function scripts() {
+    console.log("Scripts task run");
+
+    return gulp.src([
             'node_modules/jquery/dist/jquery.js',
             'node_modules/bootstrap/dist/js/bootstrap.js',
             'src/js/**/*.js'
         ])
         .pipe(uglify())
         .pipe(concat('main.min.js'))
         .pipe(gulp.dest('dist/js'));
-});
+}
 
-gulp.task('images', function() {
+function images() {
     console.log("Images task run");
 
-    gulp.src([
+    return gulp.src([
             'src/images/**/*'
         ])
         .pipe(gulp.dest('dist/images'));
-});
+}
 
-gulp.task('html', function () {
+function html() {
     console.log("HTML task run");
 
-    gulp.src(['src/*.html'])
+    return gulp.src(['src/*.html'])
         .pipe(fileinclude({
             prefix: '@@',
             basepath: 'src/partials'
@@ -72,42 +83,28 @@ gulp.task('html', function () {
             removeComments: true
         }))
         .pipe(gulp.dest('dist'));
-});
-
-gulp.task('default', function() {
-    runSequence('clean', 'sass', 'css', 'js', 'images', 'html', function() {
-        console.log('Run task done');
-        // done();
-    });
-});
-
-gulp.task('watch', function() {
-    gulp.run('default');
-
-    gulp.watch('src/scss/**/*.scss', function(event) {
-        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
-        gulp.run('sass');
-    });
-
-    gulp.watch('src/css/**/*.css', function(event) {
-        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
-        gulp.run('css');
-    });
-
-    gulp.watch('src/js/**/*.js', function(event) {
-        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
-        gulp.run('js');
-    });
-
-    gulp.watch('src/images/**/*', function(event) {
-        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
-        gulp.run('images');
-    });
-
-    gulp.watch('src/**/*.html', function (event) {
-        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
-        gulp.run('html');
-    });
-});
-
-
+}
+
+function watch() {
+    gulp.watch('src/scss/**/*.scss', sassTask);
+    gulp.watch('src/css/**/*.css', styles);
+    gulp.watch('src/js/**/*.js', scripts);
+    gulp.watch('src/images/**/*', images);
+    gulp.watch('src/**/*.html', html);
+}
+
+// define complex tasks
+const js = gulp.series(scriptsLint, scripts);
+const build = gulp.series(clean, gulp.parallel(styles, scripts, sassTask, images, html));
+
+// export tasks
+exports.clean = clean;
+exports.sassTask = sassTask;
+exports.styles = styles;
+exports.js = js;
+exports.images = images;
+exports.html = html;
+exports.watch = watch;
+exports.build = build;
+
+exports.default = build;