Update to Gulp 4.0 (Fixes #285, #284) (#287)

.nvmrc

@@ -1 +1 @@
-6
+10

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "6"
+  - "10"
 cache: node_modules
 before_script:
   - export DISPLAY=:99.0

CHANGELOG.md

@@ -1,3 +1,9 @@
+# HEAD
+
+## Features
+
+* **gulp:** Update to Gulp 4.0 (#285)
+
 # 4.0.0
 
 ## Features

docs/README.md

@@ -487,14 +487,11 @@ dist/assets
 
 The build sequence consists of a small set of [Gulp][gulp] tasks. While you'll probably only need `gulp` and `gulp --dev` most of the time, the other tasks can be called independently to process only a subset of your source files:
 
-| Task            | Description
-| ---             | ---
-| `gulp`          | Build everything and start the development server.
-| `gulp --dev`    | Do everything `gulp` does, but with file watching.
-| `gulp clean`    | Empty the destination directory.
-| `gulp frontend` | Run the frontend composite task, which lints, compiles and builds all the source files.
-| `gulp serve`    | Start the development server.
-| `gulp watch`    | Run tasks automatically when file changes occur.
+| Task         | Description
+| ---          | ---
+| `gulp`       | Build everything and start the development server.
+| `gulp --dev` | Do everything `gulp` does, but with file watching.
+| `gulp build` | Just build everything.
 
 # Running tests
 

gulp/config.js → gulpfile.js/config.js

@@ -159,32 +159,20 @@ module.exports = {
         }
     },
     watch: {
-        watchers: [
-            {
-                match: [
-                    './src/static/**/*',
-                    `${src}/package/*`
-                ],
-                tasks: ['static:copy']
-            },
-            {
-                match: `${src}/js/**/*.js`,
-                tasks: ['js:lint', 'js:concat', 'js:copy']
-            },
-            {
-                match: `${src}/sass/**/*.scss`,
-                tasks: ['css:lint', 'sass:compile']
-            },
-            {
-                match: [
-                    './src/**/*.hbs',
-                    './src/data/**/*',
-                    './src/**/*.yaml',
-                    './src/**/*.md'
-                ],
-                tasks: ['drizzle']
-            }
-        ]
+        watchers: {
+            static: [
+                './src/static/**/*',
+                `${src}/package/*`
+            ],
+            js: [`${src}/js/**/*.js`],
+            css: `${src}/sass/**/*.scss`,
+            drizzle: [
+                './src/**/*.hbs',
+                './src/data/**/*',
+                './src/**/*.yaml',
+                './src/**/*.md'
+            ]
+        }
     },
     drizzle: {
         beautifier: {

gulpfile.js/index.js

@@ -0,0 +1,17 @@
+/*
+  gulpfile.js
+  ===========
+  Rather than manage one giant configuration file responsible
+  for creating multiple tasks, each task has been broken out into
+  its own file in gulpfile.js/tasks. Any files in that directory get
+  automatically required below.
+
+  To add a new task, simply add a new task file that directory.
+  gulpfile.js/tasks/default.js specifies the default set of tasks to run
+  when you run `gulp`.
+*/
+
+const requireDir = require('require-dir');
+
+// Require all tasks in gulpfile.js/tasks, including subfolders
+requireDir('./tasks', { recurse: true });

gulpfile.js/tasks/build.js

@@ -0,0 +1,37 @@
+const gulp = require('gulp');
+const clean = require('./clean');
+const lintCSS = require('./lint-css');
+const lintJS = require('./lint-js');
+const copyStaticFiles = require('./copy-static');
+const drizzleTask = require('./drizzle');
+const compileSass = require('./compile-sass');
+const copySass = require('./copy-sass');
+const copyJS = require('./copy-js');
+const concatJS = require('./concat-js');
+const compressCSS = require('./compress-css');
+const compressJS = require('./compress-js');
+
+/*
+  Build task
+  ==========
+  This is the main Protocol build task which is responsible
+  for compiling and building all assets including html, css,
+  js, and static media. The build task consists of a number of
+  smaller composite tasks, each having a singular responsibility.
+  Composite tasks are performed serially when they depend on one
+  another. When there is no dependency, they run in parallel to
+  help reduce build times.
+*/
+
+const build = gulp.series(
+    clean,
+    gulp.parallel(lintCSS, lintJS),
+    copyStaticFiles,
+    drizzleTask,
+    gulp.parallel(compileSass, copySass, copyJS, concatJS),
+    gulp.parallel(compressCSS, compressJS)
+);
+
+// Register build task (for continuous deployment via Netlify)
+gulp.task('build', build);
+module.exports = build;

gulpfile.js/tasks/clean.js

@@ -0,0 +1,10 @@
+const del = require('del');
+const config = require('../config').clean;
+
+function clean(cb) {
+    del([config.dest]).then(() => {
+        cb();
+    });
+}
+
+module.exports = clean;

gulp/tasks/sass-compile.js → gulpfile.js/tasks/compile-sass.js

@@ -7,7 +7,7 @@ const plumber = require('gulp-plumber');
 const merge = require('merge-stream');
 
 // Compile the main Protocol Sass file(s) to CSS.
-gulp.task('sass:compile', () => {
+function compileSass() {
     let tasks = [];
 
     Object.keys(config).forEach((key) => {
@@ -21,4 +21,6 @@ gulp.task('sass:compile', () => {
     });
 
     return merge(tasks);
-});
+}
+
+module.exports = compileSass;

gulp/tasks/css-compress.js → gulpfile.js/tasks/compress-css.js

@@ -5,7 +5,7 @@ const config = require('../config').compressCss;
 const merge = require('merge-stream');
 
 // Create minified versions of all CSS assets.
-gulp.task('css:compress', () => {
+function compressCSS() {
     let tasks = [];
 
     Object.keys(config.tasks).forEach((key) => {
@@ -17,4 +17,6 @@ gulp.task('css:compress', () => {
     });
 
     return merge(tasks);
-});
+}
+
+module.exports = compressCSS;

gulp/tasks/js-compress.js → gulpfile.js/tasks/compress-js.js

@@ -7,7 +7,7 @@ const config = require('../config').compressJS;
 const merge = require('merge-stream');
 
 // Create minified versions of all JS assets.
-gulp.task('js:compress', () => {
+function compressJS() {
     let tasks = [];
 
     Object.keys(config.tasks).forEach((key) => {
@@ -20,4 +20,6 @@ gulp.task('js:compress', () => {
     });
 
     return merge(tasks);
-});
+}
+
+module.exports = compressJS;

gulp/tasks/js-concat.js → gulpfile.js/tasks/concat-js.js

@@ -5,8 +5,8 @@ const handleErrors = require('../utils/handleErrors');
 const config = require('../config').concatJS;
 const merge = require('merge-stream');
 
-// Concatenate main Protocol & docs JS files.
-gulp.task('js:concat', () => {
+// Concatenate docs JS files.
+function concatJS() {
     let tasks = [];
 
     Object.keys(config).forEach((key) => {
@@ -18,4 +18,6 @@ gulp.task('js:concat', () => {
     });
 
     return merge(tasks);
-});
+}
+
+module.exports = concatJS;

gulp/tasks/js-copy.js → gulpfile.js/tasks/copy-js.js

@@ -3,12 +3,14 @@ const config = require('../config').jsCopy;
 const merge = require('merge-stream');
 
 // Copy across all original JS files for distribution.
-gulp.task('js:copy', () => {
+function copyJS() {
     let tasks = [];
     Object.keys(config).forEach((key) => {
         let val = config[key];
         tasks.push(gulp.src(val.src).pipe(gulp.dest(val.dest)));
     });
 
     return merge(tasks);
-});
+}
+
+module.exports = copyJS;

gulp/tasks/sass-copy.js → gulpfile.js/tasks/copy-sass.js

@@ -4,15 +4,17 @@ const merge = require('merge-stream');
 const replace = require('gulp-replace');
 
 // Copy across all original Sass source files for distribution.
-gulp.task('sass:copy', () => {
+function copySass() {
     let tasks = [];
     Object.keys(config).forEach((key) => {
         let val = config[key];
         tasks.push(gulp.src(val.src)
             .pipe(replace('./node_modules/@mozilla-protocol/', ''))
-            .pipe(gulp.dest(val.dest))  
+            .pipe(gulp.dest(val.dest))
         );
     });
 
     return merge(tasks);
-});
+}
+
+module.exports = copySass;

gulp/tasks/static-copy.js → gulpfile.js/tasks/copy-static.js

@@ -3,12 +3,14 @@ const config = require('../config').staticCopy;
 const merge = require('merge-stream');
 
 // Copy across all static assets for both Protocol and docs.
-gulp.task('static:copy', () => {
+function copyStaticFiles() {
     let tasks = [];
     Object.keys(config).forEach((key) => {
         let val = config[key];
         tasks.push(gulp.src(val.src).pipe(gulp.dest(val.dest)));
     });
 
     return merge(tasks);
-});
+}
+
+module.exports = copyStaticFiles;

gulpfile.js/tasks/default.js

@@ -0,0 +1,18 @@
+const gulp = require('gulp');
+const build = require('./build');
+const serve = require('./serve');
+const watch = require('./watch');
+const argv = require('yargs').argv;
+
+function defaultTask(cb) {
+    serve();
+
+    if (argv.dev) {
+        watch();
+    }
+
+    cb();
+}
+
+gulp.task('default', gulp.series(build, defaultTask));
+module.exports = gulp.series(build, defaultTask);

gulp/tasks/drizzle.js → gulpfile.js/tasks/drizzle.js

@@ -1,12 +1,13 @@
 const drizzle = require('drizzle-builder');
-const gulp = require('gulp');
 const config = require('../config');
 const helpers = require('@cloudfour/hbs-helpers');
 
 // Append config
 Object.assign(config.drizzle, { helpers });
 
 // Register Drizzle builder task
-gulp.task('drizzle', () => {
+function drizzleTask() {
     return drizzle(config.drizzle);
-});
+}
+
+module.exports = drizzleTask;

gulp/tasks/css-lint.js → gulpfile.js/tasks/lint-css.js

@@ -3,13 +3,14 @@ const gulpStylelint = require('gulp-stylelint');
 const config = require('../config').lintCss;
 const styleLintConfig = require('../../stylelint.config');
 
-gulp.task('css:lint', () => {
-    return gulp
-        .src(config.src)
+function lintCSS() {
+    return gulp.src(config.src)
         .pipe(gulpStylelint({
             config: styleLintConfig,
             reporters: [
                 {formatter: 'string', console: true}
             ]
         }));
-});
+}
+
+module.exports = lintCSS;