Upgrade to Gulp v4 & Node 10

* Syntax changes to get Gulp working
* Require Node 10, use node 10 in CircleCI and squash.yml
* Update docs
* resolves #5653

.circleci/config.yml

@@ -27,7 +27,7 @@ jobs:
 
   frontend:
     docker:
-      - image: circleci/node:8.11.3
+      - image: circleci/node:10
     steps:
       - checkout
       - restore_cache:

.nvmrc

@@ -1 +1 @@
-8
+10

.squash.yml

@@ -3,7 +3,7 @@ deployments:
     dockerimage: python:3.7.4-stretch
     build_steps:
       - apt-get update && apt-get install -y libssl-dev libpq-dev git build-essential libfontconfig1 libfontconfig1-dev curl
-      - RUN bash -c "curl -sL https://deb.nodesource.com/setup_8.x | bash -"
+      - RUN bash -c "curl -sL https://deb.nodesource.com/setup_10.x | bash -"
       - apt install -y nodejs
       - pip install setuptools pip --upgrade --force-reinstall
       - cd /code

CHANGELOG.txt

@@ -13,6 +13,7 @@ Changelog
  * `AbstractEmailForm` now has a separate method (`render_email`) to build up email content on submission emails (Haydn Greatnews)
  * Add `pre_page_move` and `post_page_move` signals (Andy Babic)
  * Add ability to sort search promotions on listing page (Chris Ranjana, LB (Ben Johnston))
+ * Upgrade internal JS tooling to Gulp v4 & Node v10 (Jim Jazwiecki, Kim LaRocca)
  * Fix: Ensure link to add a new user works when no users are visible in the users list (LB (Ben Johnston))
  * Fix: `AbstractEmailForm` saved submission fields are now aligned with the email content fields, `form.cleaned_data` will be used instead of `form.fields` (Haydn Greatnews)
  * Fix: Removed ARIA `role="table"` from TableBlock output (Thibaud Colas)

CONTRIBUTORS.rst

@@ -452,6 +452,8 @@ Contributors
 * Chris Ranjana
 * Tomas Walch
 * François Poulain
+* Jim Jazwiecki
+* Kim LaRocca
 
 Translators
 ===========

docs/contributing/developing.rst

@@ -15,7 +15,7 @@ If you'd prefer to set up all the components manually, read on. These instructio
 Setting up the Wagtail codebase
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-Install Node.js, version 8. Instructions for installing Node.js can be found on the `Node.js download page <https://nodejs.org/download/>`_.
+Install Node.js, version 10. Instructions for installing Node.js can be found on the `Node.js download page <https://nodejs.org/download/>`_.
 You can also use Node version manager (nvm) since Wagtail supplies a ``.nvmrc`` file in the root of the project with the minimum required Node version - see nvm's `installation instructions <https://github.com/creationix/nvm>`_.
 
 You will also need to install the **libjpeg** and **zlib** libraries, if you haven't done so already - see Pillow's `platform-specific installation instructions <https://pillow.readthedocs.org/en/latest/installation.html#external-libraries>`_.

docs/releases/2.10.rst

@@ -22,6 +22,7 @@ Other features
  * ``AbstractEmailForm`` now has a separate method (``render_email``) to build up email content on submission emails. See :ref:`form_builder_render_email`. (Haydn Greatnews)
  * Add ``pre_page_move`` and ``post_page_move`` signals. (Andy Babic)
  * Add ability to sort search promotions on listing page (Chris Ranjana, LB (Ben Johnston))
+ * Upgrade internal JS tooling to Gulp v4 & Node v10 (Jim Jazwiecki, Kim LaRocca)
 
 
 Bug fixes

gulpfile.js/index.js

@@ -1,7 +1,7 @@
-require('./tasks/build');
-require('./tasks/default');
 require('./tasks/fonts');
 require('./tasks/images');
 require('./tasks/scripts');
 require('./tasks/styles');
+require('./tasks/build');
 require('./tasks/watch');
+require('./tasks/default');

gulpfile.js/tasks/build.js

@@ -1,3 +1,3 @@
 var gulp = require('gulp');
 
-gulp.task('build', ['styles', 'scripts', 'images', 'fonts']);
+gulp.task('build', gulp.series('styles', 'scripts', 'images', 'fonts'));

gulpfile.js/tasks/default.js

@@ -1,3 +1,3 @@
 var gulp = require('gulp');
 
-gulp.task('default', ['build', 'watch']);
+gulp.task('default', gulp.series('build', 'watch'));

gulpfile.js/tasks/styles.js

@@ -38,8 +38,6 @@ var cssnanoConfig = {
     zindex: false,
 };
 
-gulp.task('styles', ['styles:sass', 'styles:css', 'styles:assets']);
-
 // Copy all assets that are not CSS files.
 gulp.task('styles:assets', simpleCopyTask('css/**/!(*.css)'));
 
@@ -91,3 +89,5 @@ gulp.task('styles:sass', function () {
         }))
         .on('error', gutil.log);
 });
+
+gulp.task('styles', gulp.series('styles:sass', 'styles:css', 'styles:assets'));

gulpfile.js/tasks/watch.js

@@ -5,7 +5,7 @@ var config = require('../config');
 /*
  * Watch - Watch files, trigger tasks when they are modified
  */
-gulp.task('watch', ['build'], function () {
+gulp.task('watch', gulp.series('build'), function () {
     config.apps.forEach(function(app) {
         gulp.watch(path.join('./client/**/*.scss'), ['styles:sass']);
         gulp.watch(path.join(app.sourceFiles, '*/scss/**'), ['styles:sass']);

package.json

@@ -3,6 +3,9 @@
   "version": "1.0.0",
   "repository": "https://github.com/wagtail/wagtail",
   "private": true,
+  "engines": {
+    "node": ">=10.0.0"
+  },
   "babel": {
     "presets": [
       [
@@ -68,7 +71,7 @@
     "eslint-plugin-jsx-a11y": "^1.5.3",
     "eslint-plugin-react": "^5.2.2",
     "expose-loader": "^0.7.4",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.0",
     "gulp-autoprefixer": "~4.0.0",
     "gulp-cssnano": "^2.1.2",
     "gulp-rename": "^1.2.2",