update build system with gulp4

Author: unbug

build-system/build.js

@@ -1,13 +1,13 @@
 'use strict';
 
-const gulp = require('gulp-help')(require('gulp'));
+const gulp = require('gulp');
 const $ = require('./util');
 const webpack = require('webpack');
 const webpackConfig = require('../webpack.config.js');
-const runSequence = require('run-sequence');
 const env = process.env.NODE_ENV;
 
-gulp.task('build:app-js', 'Builds the app scripts.', () => {
+// Builds the app scripts.
+gulp.task('build:app-js', () => {
   return new Promise(resolve => webpack(webpackConfig[env === 'production' ? 'prod' : 'dev'], (err, stats) => {
     if (err) throw new $.util.PluginError('webpack', err);
     let errorStats = stats.toString('errors-only');
@@ -16,8 +16,9 @@ gulp.task('build:app-js', 'Builds the app scripts.', () => {
   }));
 });
 
-gulp.task('build:app-css', 'Builds the app style.', cb => {
-  gulp.src(['./styles/**/*.scss'], {buffer: true})
+// Builds the app style.
+gulp.task('build:app-css', cb => {
+  gulp.src(['./styles/**/*.scss'], { buffer: true })
     .pipe($.sass({
       outputStyle: 'expanded',
       sourceMap: 'app.css.map',
@@ -35,30 +36,29 @@ gulp.task('build:app-css', 'Builds the app style.', cb => {
     });
 });
 
-gulp.task('build:lib-js', 'Builds the lib scripts.', () => {
+// Builds the lib scripts.
+gulp.task('build:lib-js', () => {
   return gulp.src(require('../lib.config').js)
     .pipe($.concat('lib.js'))
     .pipe(gulp.dest('./app/js/'));
 });
 
-gulp.task('build:lib-css', 'Builds the lib style.', () => {
+// Builds the lib style.
+gulp.task('build:lib-css', () => {
   return gulp.src(require('../lib.config').css)
     .pipe($.concat('lib.css'))
     .pipe($.replace('@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);', ''))
     .pipe(gulp.dest('./app/css/'));
 });
 
-gulp.task('build:images', 'Builds the app style.', () => {
+// Builds the app style.
+gulp.task('build:images', () => {
   return gulp.src('./assets/images/**/*.*')
     .pipe(gulp.dest('./app/images/'));
 });
 
-gulp.task('build:fonts', 'Builds the app fonts.', () => {
-  return gulp.src('./assets/fonts/**/*.*')
-    .pipe(gulp.dest('./app/fonts/'));
-});
-
-gulp.task('build:extra', 'Builds extra files.', () => {
+// Builds extra files.
+gulp.task('build:extra', () => {
   return Promise.all(require('../lib.config').extra.map(key => {
     const dest = Object.keys(key);
     const path = key[dest];
@@ -67,14 +67,5 @@ gulp.task('build:extra', 'Builds extra files.', () => {
   }));
 });
 
-gulp.task('build', 'Builds the app.', cb => {
-  runSequence([
-    'build:extra',
-    'build:fonts',
-    'build:images',
-    'build:app-js',
-    'build:lib-css',
-    'build:app-css',
-    'build:lib-js'
-  ], cb);
-});
+// Builds the app.
+gulp.task('build', gulp.parallel('build:extra', 'build:images', 'build:app-js', 'build:lib-css', 'build:app-css', 'build:lib-js'));

build-system/clean.js

@@ -1,13 +1,12 @@
 'use strict';
 
-const gulp = require('gulp-help')(require('gulp'));
+const gulp = require('gulp');
 const del = require('del');
-const runSequence = require('run-sequence');
 
-gulp.task('clean:dist', 'Cleans dist files.', () => {
-  return del(['./dist/**'], {force: true});
+// Cleans dist files.
+gulp.task('clean:dist', () => {
+  return del(['./dist/**'], { force: true });
 });
 
-gulp.task('clean', 'Cleans files.', cb => {
-  runSequence('clean:dist', cb);
-});
+// Cleans files.
+gulp.task('clean', gulp.series('clean:dist'));

build-system/default.js

@@ -1,18 +1,20 @@
 'use strict';
 
-const gulp = require('gulp-help')(require('gulp'));
+const gulp = require('gulp');
 const $ = require('./util');
-const runSequence = require('run-sequence');
 
-function watch(files, cb) {
-  return gulp.watch(files, function (event) {
-    $.util.log($.util.colors.bold('File ' + event.path + ' was ' + event.type + ', running tasks...'));
-    cb();
+function watch(files, task) {
+  const watcher = gulp.watch(files, task);
+  ['add', 'addDir', 'change', 'unlink', 'unlinkDir'].forEach(type => {
+    watcher.on(type, (path, stats) => {
+      $.util.log($.util.colors.bold('File ' + path + ' was ' + type + ', running tasks...'));
+    });
   });
 }
 
-gulp.task('watch', 'Watches for changes in files.',
-  () => {
-    watch(['lib.config.js'], () => runSequence('lint', 'build:extra', 'build:lib-js', 'build:lib-css'));
-    watch(['styles/**/*.*'], () => runSequence('lint', 'build:app-css'));
-  });
+// Watches for changes in files.
+gulp.task('watch', cb => {
+  watch(['lib.config.js'], gulp.series('lint', 'build:extra', 'build:lib-js', 'build:lib-css'));
+  watch(['styles/**/*.*'], gulp.series('lint', 'build:app-css'));
+  cb();
+});

build-system/dist.js

@@ -1,68 +1,72 @@
 'use strict';
-const gulp = require('gulp-help')(require('gulp'));
+
+const gulp = require('gulp');
 const $ = require('./util');
 const pngquant = require('imagemin-pngquant');
-const runSequence = require('run-sequence');
 const cachebust = $.cachebust();
 const through2 = require('through2');
 
 const distPath = './dist';
 const buildVersion = (new Date()).toISOString();
 
-gulp.task('dist:all', 'Copy all to dist.', () => {
+// Copy all to dist.
+gulp.task('dist:all', () => {
   return gulp.src(['./app/**/**'])
     .pipe(gulp.dest(distPath))
-    .pipe($.size({title: 'dist:all'}));
+    .pipe($.size({ title: 'dist:all' }));
 });
 
-gulp.task('dist:images', 'Compress images to dist.', () => {
+// Compress images to dist.
+gulp.task('dist:images', () => {
   return gulp.src(['./app/images/**/*'])
     .pipe($.imagemin({
       use: [pngquant()]
     }))
     .pipe(cachebust.resources())
     .pipe(gulp.dest(distPath + '/images/'))
-    .pipe($.size({title: 'dist:images'}));
+    .pipe($.size({ title: 'dist:images' }));
 });
 
-gulp.task('dist:css', 'Compress css to dist.', () => {
+// Compress css to dist.
+gulp.task('dist:css', () => {
   return gulp.src('./app/css/**/*.css')
     .pipe(cachebust.references())
-    .pipe($.csso({comments: false}))
+    .pipe($.csso({ comments: false }))
     .pipe(cachebust.resources())
     .pipe(gulp.dest(distPath + '/css'))
-    .pipe($.size({title: 'dist:css'}));
+    .pipe($.size({ title: 'dist:css' }));
 });
 
-gulp.task('dist:js', 'Compress js to dist.', () => {
+// Compress js to dist.
+gulp.task('dist:js', () => {
   return gulp.src(['./app/js/*.js'])
     .pipe(cachebust.references())
     .pipe($.minify())
     .pipe(cachebust.resources())
     .pipe(gulp.dest(distPath + '/js/'))
-    .pipe($.size({title: 'dist:js'}));
+    .pipe($.size({ title: 'dist:js' }));
 });
 
-gulp.task('dist:html', 'Compress html to dist.', () => {
+// Compress html to dist.
+gulp.task('dist:html', () => {
   return gulp.src(['./app/*.html'])
     .pipe(cachebust.references())
-    .pipe($.htmlmin({collapseWhitespace: true, minifyCSS: true, minifyJS: true}))
+    .pipe($.htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
     .pipe(gulp.dest(distPath))
-    .pipe($.size({title: 'dist:html'}));
+    .pipe($.size({ title: 'dist:html' }));
 });
 
-
 //generate service workers
-gulp.task('dist:serviceworkers', function (cb) {
+gulp.task('dist:serviceworkers', cb => {
   const swConfig = require('../lib.config').serviceWorker;
   const rootPath = __dirname.replace('build-system', '') + 'dist/';
   let resources = ['"./"'];
   gulp.src([distPath + '/**/*.*'])
     .pipe(through2.obj(function (file, enc, next) {
-      !/sw\.js|\.html|\.map/.test(file.path) && this.push('"' + file.path.replace(rootPath,'') + '"');
+      !/sw\.js|\.html|\.map/.test(file.path) && this.push('"' + file.path.replace(rootPath, '') + '"');
       next();
     }))
-    .on('data', function (data) {
+    .on('data', data => {
       resources.push(data)
     })
     .on('end', function () {
@@ -79,7 +83,5 @@ gulp.task('dist:serviceworkers', function (cb) {
     });
 });
 
-
-gulp.task('dist', 'Dist the app.', cb => {
-  runSequence('clean:dist', 'dist:all', 'dist:images', 'dist:css', 'dist:js', 'dist:html', 'dist:serviceworkers', cb);
-});
+// Dist the app.
+gulp.task('dist', gulp.series('clean:dist', 'dist:all', 'dist:images', 'dist:css', 'dist:js', 'dist:html', 'dist:serviceworkers'));

build-system/lint.js

@@ -1,9 +1,10 @@
 'use strict';
 
-const gulp = require('gulp-help')(require('gulp'));
+const gulp = require('gulp');
 const $ = require('./util');
 
-gulp.task('lint', 'Lint JS files.', () => {
+// Lint JS files.
+gulp.task('lint', () => {
   return gulp.src(['gulpfile.js', 'build-system/**/*.js', 'src/**/*.js*', '!src/vendors/**/**.*', '!src/sw.js'])
     .pipe($.eslint())
     .pipe($.eslint.format());

build-system/server.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const gulp = require('gulp-help')(require('gulp'));
+const gulp = require('gulp');
 const browserSync = require('browser-sync').create();
 const $ = require('./util');
 const serveIndex = require('serve-index');
@@ -9,8 +9,8 @@ const webpackHotMiddleware = require('webpack-hot-middleware');
 const webpack = require('webpack');
 const webpackConfig = require('../webpack.config.js');
 
-// start server with browserSync
-gulp.task('server', 'Starts a HTTP(s) server for debug.',  () => {
+// Starts a HTTP(s) server for debug.
+gulp.task('server', () => {
   return new Promise(resolve => {
     const compiler = webpack(webpackConfig.dev, () => {
       const config = {
@@ -31,7 +31,7 @@ gulp.task('server', 'Starts a HTTP(s) server for debug.',  () => {
           serveIndex('.'),
           webpackDevMiddleware(compiler, {
             publicPath: webpackConfig.dev.output.publicPath,
-            stats: {colors: true},
+            stats: { colors: true },
             writeToDisk: true,
             logTime: true,
             logLevel: 'error'

gulpfile.js

@@ -1,23 +1,52 @@
 'use strict';
 
-const gulp = require('gulp-help')(require('gulp'));
+const gulp = require('gulp');
 const $ = require('./build-system/util');
-const runSequence = require('run-sequence');
 const requireDir = require('require-dir');
 requireDir('./build-system');
 
+gulp.task('help', cb => {
+  $.util.log(
+    `
+    Usage
+    gulp [TASK] [OPTIONS...]
+
+  Available tasks
+    build          Builds the app.
+    build:app-css  Builds the app style.
+    build:app-js   Builds the app scripts.
+    build:extra    Builds extra files.
+    build:images   Builds the app style.
+    build:lib-css  Builds the lib style.
+    build:lib-js   Builds the lib scripts.
+    clean          Cleans files.
+    clean:dist     Cleans dist files.
+    default
+    dist           Dist the app.
+    dist:all       Copy all to dist.
+    dist:css       Compress css to dist.
+    dist:html      Compress html to dist.
+    dist:images    Compress images to dist.
+    dist:js        Compress js to dist.
+    help           Display this help text.
+    lint           Lint JS files.
+    server         Starts a HTTP(s) server for debug.
+    watch          Watches for changes in files.
+    `
+  );
+  cb();
+});
+
 // Run tasks: lint, build, docs, watch, server
-gulp.task('default', (cb) => {
+gulp.task('default', cb => {
   $.util.log(
     $.util.colors.green('Building and watching for changes ...')
   );
-  runSequence(
+  gulp.series(
     'lint',
-    'build:fonts', 'build:extra', 'build:images', 'build:app-css', 'build:lib-js', 'build:lib-css',
-    'watch', 'server', () => {
-    cb();
-    $.util.log(
-      $.util.colors.green('Ready! Run "gulp help" for more build command usages.'), '\n'
-    );
-  });
+    'build:extra', 'build:images', 'build:app-css', 'build:lib-js', 'build:lib-css', 'watch', 'server', () => {
+      $.util.log(
+        $.util.colors.green('Ready! Run "gulp help" for more build command usages.'), '\n'
+      );
+    })(cb);
 });