perf(gulpfile.js): improve initial startup time (#276)

* build(gulpfile.js): lazy-load packages

to improve initial loading times

* build(webpack): add hard source plugin

* build(webpack): update console view config

* build(gulpfile.js): replace deprecated gulp-util package

* build(package.json): update minimum engine requirement to node 8

* ci(travis): update minimum engine requirement to node 8

BREAKING CHANGE: The minimum engine requirement is now Node >= 8.

.travis.yml

@@ -30,8 +30,8 @@ before_script:
 install:
   - composer global require "squizlabs/php_codesniffer=~3.1"
   - export PATH="$HOME/.composer/vendor/bin:$PATH"
-  - nvm install 6
-  - nvm use 6
+  - nvm install 8
+  - nvm use 8
   - npm i -g yarn gulp
 
 script:

gulpfile.js/tasks/browserSync.js

@@ -1,8 +1,8 @@
-const browserSync = require('browser-sync')
 const gulp = require('gulp')
 
 module.exports = function (config) {
   gulp.task('browserSync', function () {
+    const browserSync = require('browser-sync')
     return browserSync.init(config.browserSync)
   })
 }

gulpfile.js/tasks/build.js

@@ -1,8 +1,8 @@
 const gulp = require('gulp')
-const runSequence = require('run-sequence')
 
 module.exports = function (config) {
   gulp.task('build', function (cb) {
+    const runSequence = require('run-sequence')
     runSequence(
       'clean',
       ['copy', 'webpack:build', 'stylus', 'lint'],

gulpfile.js/tasks/clean.js

@@ -1,8 +1,8 @@
-const del = require('del')
 const gulp = require('gulp')
 
 module.exports = function (config) {
   gulp.task('clean', function () {
+    const del = require('del')
     return del([
       `${config.dest}/**`
     ])

gulpfile.js/tasks/copy.js

@@ -1,14 +1,17 @@
 const gulp = require('gulp')
-const changed = require('gulp-changed')
-const browserSync = require('browser-sync')
-const handleErrors = require('../utils/handleErrors')
 
 module.exports = function (config) {
   gulp.task('copy', function () {
-    return gulp.src(config.copy)
+    const changed = require('gulp-changed')
+    const handleErrors = require('../utils/handleErrors')
+    let task = gulp.src(config.copy)
     .pipe(changed(config.dest))
     .pipe(gulp.dest(config.dest))
     .on('error', handleErrors)
-    .pipe(browserSync.stream())
+    if (global.watchMode) {
+      const browserSync = require('browser-sync')
+      task = task.pipe(browserSync.stream())
+    }
+    return task
   })
 }

gulpfile.js/tasks/default.js

@@ -1,8 +1,8 @@
 const gulp = require('gulp')
-const runSequence = require('run-sequence')
 
 module.exports = function (config) {
   gulp.task('default', function (cb) {
+    const runSequence = require('run-sequence')
     global.watchMode = true
     runSequence(
       'clean',

gulpfile.js/tasks/lint.js

@@ -1,14 +1,7 @@
-const gulp = require('gulp')
-const gutil = require('gulp-util')
-const changedInPlace = require('gulp-changed-in-place')
-const stylint = require('gulp-stylint')
-const standard = require('gulp-standard')
-const phpcs = require('gulp-phpcs')
-const hasbin = require('hasbin')
-const path = require('path')
-const fs = require('fs')
-
 module.exports = function (config) {
+  const gulp = require('gulp')
+  const path = require('path')
+  const fs = require('fs')
   let phpCsAvailable
   let binaryPath = path.resolve(process.cwd(), config.lint.phpcs.binaryPath)
   delete config.lint.phpcs.binaryPath
@@ -17,6 +10,7 @@ module.exports = function (config) {
     fs.accessSync(binaryPath, fs.constants.F_OK | fs.constants.X_OK)
     phpCsAvailable = true
   } catch (error) {
+    const hasbin = require('hasbin')
     if (hasbin.sync('phpcs')) {
       phpCsAvailable = true
       binaryPath = ''
@@ -26,13 +20,17 @@ module.exports = function (config) {
   if (phpCsAvailable) {
     gulp.task('lint', ['lint:stylus', 'lint:js', 'lint:php'])
   } else {
-    gutil.log(gutil.colors.yellow('PHPCS not found in PATH! Please install PHPCS to enable the php linter:'))
-    gutil.log(gutil.colors.yellow.underline('https://github.com/squizlabs/PHP_CodeSniffer'))
+    const log = require('fancy-log')
+    const colors = require('ansi-colors')
+    log(colors.yellow('PHPCS not found in PATH! Please install PHPCS to enable the php linter:'))
+    log(colors.yellow.underline('https://github.com/squizlabs/PHP_CodeSniffer'))
 
     gulp.task('lint', ['lint:stylus', 'lint:js'])
   }
 
   gulp.task('lint:stylus', function () {
+    const stylint = require('gulp-stylint')
+    const changedInPlace = require('gulp-changed-in-place')
     const task = gulp.src(config.lint.stylus)
     .pipe(changedInPlace({firstPass: true}))
     .pipe(stylint())
@@ -46,6 +44,8 @@ module.exports = function (config) {
   })
 
   gulp.task('lint:js', function () {
+    const standard = require('gulp-standard')
+    const changedInPlace = require('gulp-changed-in-place')
     let opts = {}
     if (!global.watchMode) {
       opts = {
@@ -61,6 +61,8 @@ module.exports = function (config) {
 
   gulp.task('lint:php', function (cb) {
     if (phpCsAvailable) {
+      const phpcs = require('gulp-phpcs')
+      const changedInPlace = require('gulp-changed-in-place')
       config.lint.phpcs.bin = binaryPath
       const task = gulp.src(config.lint.php)
       .pipe(changedInPlace({firstPass: true}))

gulpfile.js/tasks/replaceVersion.js

@@ -1,32 +1,34 @@
 const gulp = require('gulp')
-const gutil = require('gulp-util')
-const pjson = require('../../package.json')
-const replace = require('replace-in-file')
 
 module.exports = function (config) {
   gulp.task('replaceVersion', function (cb) {
+    const log = require('fancy-log')
+    const colors = require('ansi-colors')
+    const PluginError = require('plugin-error')
+    const pjson = require('../../package.json')
+    const replace = require('replace-in-file')
     try {
       // read current version from package.json
       config.replaceVersion.php.to = pjson.version
-      gutil.log(`Replacing ${config.replaceVersion.php.from} with ${config.replaceVersion.php.to} in all PHP files.`)
+      log(`Replacing ${config.replaceVersion.php.from} with ${config.replaceVersion.php.to} in all PHP files.`)
       const changedFilesPhp = replace.sync(config.replaceVersion.php)
       for (const file of changedFilesPhp) {
-        gutil.log(`Updated ${file}`)
+        log(`Updated ${file}`)
       }
 
       // replace WordPress theme version in style.css
-      gutil.log('Updating WordPress theme version.')
+      log('Updating WordPress theme version.')
       config.replaceVersion.wordpress.to += pjson.version
       const changedFilesWp = replace.sync(config.replaceVersion.wordpress)
       if (changedFilesWp.length > 0) {
         for (const file of changedFilesWp) {
-          gutil.log(`Updated ${file}`)
+          log(`Updated ${file}`)
         }
       } else {
-        gutil.log(gutil.colors.yellow('No changes made! Was the version already changed?'))
+        log(colors.yellow('No changes made! Was the version already changed?'))
       }
     } catch (error) {
-      gutil.error('An error occurred:', error)
+      throw new PluginError('replaceVersion', error)
     }
     cb()
   })

gulpfile.js/tasks/rev/rev.js

@@ -1,8 +1,8 @@
 const gulp = require('gulp')
-const runSequence = require('run-sequence')
 
 module.exports = function (config) {
   gulp.task('rev', function (cb) {
+    const runSequence = require('run-sequence')
     return runSequence(
       // 1) Add md5 hashes to assets referenced by CSS and JS files
       'revAssets',

gulpfile.js/tasks/rev/revAssets.js

@@ -1,11 +1,11 @@
 const gulp = require('gulp')
-const path = require('path')
-const rev = require('gulp-rev')
-const revNapkin = require('gulp-rev-napkin')
 
 module.exports = function (config) {
   // 1) Add md5 hashes to assets referenced by CSS and JS files
   gulp.task('revAssets', function () {
+    const path = require('path')
+    const rev = require('gulp-rev')
+    const revNapkin = require('gulp-rev-napkin')
     // Ignore files that may reference assets. We'll rev them next.
     return gulp.src(config.rev.assetSrc)
     .pipe(rev())

gulpfile.js/tasks/rev/revRevvedFiles.js

@@ -1,12 +1,12 @@
 const gulp = require('gulp')
-const path = require('path')
-const rev = require('gulp-rev')
-const revNapkin = require('gulp-rev-napkin')
 
 module.exports = function (config) {
   // 3) Rev and compress CSS and JS files (this is done after assets, so that if a
   //    referenced asset hash changes, the parent hash will change as well
   gulp.task('revRevvedFiles', function () {
+    const path = require('path')
+    const rev = require('gulp-rev')
+    const revNapkin = require('gulp-rev-napkin')
     return gulp.src(config.rev.srcRevved)
     .pipe(rev({
       replaceInExtensions: config.rev.revvedFileExtensions

gulpfile.js/tasks/rev/revStaticFiles.js

@@ -1,10 +1,10 @@
 const gulp = require('gulp')
-const path = require('path')
-const revReplace = require('gulp-rev-replace')
 
 module.exports = function (config) {
   // 4) Update asset references in HTML
   gulp.task('revStaticFiles', function () {
+    const path = require('path')
+    const revReplace = require('gulp-rev-replace')
     var manifest = gulp.src(path.join(config.dest, '/rev-manifest.json'))
     return gulp.src(config.rev.srcStatic)
     .pipe(revReplace({

gulpfile.js/tasks/rev/revUpdateReferences.js

@@ -1,10 +1,10 @@
 const gulp = require('gulp')
-const path = require('path')
-const revReplace = require('gulp-rev-replace')
 
 module.exports = function (config) {
   // 2) Update asset references with reved filenames in compiled css + js
   gulp.task('revUpdateReferences', function () {
+    const path = require('path')
+    const revReplace = require('gulp-rev-replace')
     var manifest = gulp.src(path.join(config.dest, 'rev-manifest.json'))
 
     return gulp.src(path.join(config.dest, '/**/**.{css,js}'))

gulpfile.js/tasks/stylus.js

@@ -1,19 +1,18 @@
-const autoprefixer = require('autoprefixer-stylus')
-const browserSync = require('browser-sync')
-const changed = require('gulp-changed')
 const gulp = require('gulp')
-const gulpIf = require('gulp-if')
-const handleErrors = require('../utils/handleErrors')
-const path = require('path')
-const rupture = require('rupture')
-const sourcemaps = require('gulp-sourcemaps')
-const stylus = require('gulp-stylus')
 
 module.exports = function (config) {
   const isProduction = process.env.NODE_ENV === 'production'
   gulp.task('stylus', function () {
-    return gulp.src(config.stylus)
-    .pipe(changed(config.dest))
+    const autoprefixer = require('autoprefixer-stylus')
+    const changed = require('gulp-changed')
+    const gulpIf = require('gulp-if')
+    const handleErrors = require('../utils/handleErrors')
+    const path = require('path')
+    const rupture = require('rupture')
+    const stylus = require('gulp-stylus')
+    const sourcemaps = require('gulp-sourcemaps')
+    let task = gulp.src(config.stylus)
+    .pipe(changed(config.dest, {extension: '.css'}))
     .pipe(gulpIf(!isProduction, sourcemaps.init()))
     .pipe(stylus({
       compress: isProduction,
@@ -30,6 +29,10 @@ module.exports = function (config) {
     .pipe(gulpIf(!isProduction, sourcemaps.write(config.sourcemaps)))
     .pipe(gulp.dest(config.dest))
     .on('error', handleErrors)
-    .pipe(browserSync.stream())
+    if (global.watchMode) {
+      const browserSync = require('browser-sync')
+      task = task.pipe(browserSync.stream())
+    }
+    return task
   })
 }

gulpfile.js/tasks/watch.js

@@ -1,9 +1,7 @@
+const gulp = require('gulp')
 const path = require('path')
 const fs = require('fs')
-const gulp = require('gulp')
-const watch = require('gulp-watch')
-const runSequence = require('run-sequence')
-const webpackTask = require('./webpack')
+let watch
 
 const extensionMappings = {
   '.styl': '.css'
@@ -30,7 +28,8 @@ function watchAndDelete (src, callback, dest) {
     if (file.event === 'unlinkDir') {
       const dirPath = path.join(dest, file.relative)
       if (fs.existsSync(dirPath)) {
-        fs.rmdirSync(dirPath)
+        const del = require('del')
+        return del(dirPath, {force: true})
       }
     }
   })
@@ -39,6 +38,7 @@ function watchAndDelete (src, callback, dest) {
 function watchWebpack (src) {
   watch(src)
   .on('data', function (file) {
+    const webpackTask = require('./webpack')
     if (webpackTask.watching) {
       if (file.event === 'add' || file.event === 'unlink') {
         webpackTask.watching.invalidate()
@@ -49,12 +49,14 @@ function watchWebpack (src) {
 
 module.exports = function (config) {
   gulp.task('watch:files', function () {
+    watch = require('gulp-watch')
     watchAndDelete(config.copy, function () { gulp.start('copy') }, config.dest)
     watchAndDelete(config.watch.stylus, function () { gulp.start('stylus') }, config.dest)
     watch(config.watch.php, function () { })
     watchWebpack(config.webpack.entry)
   })
   gulp.task('watch', function (cb) {
+    const runSequence = require('run-sequence')
     runSequence(
       ['webpack:watch', 'browserSync'],
       'watch:files',