Merge pull request #2957 from uswds/sc_gulp-upgrade

Update gulp to v4

.stylelintrc.json

@@ -17,7 +17,6 @@
     "color-no-invalid-hex": true,
     "declaration-bang-space-after": "never",
     "declaration-bang-space-before": "always",
-    "declaration-block-no-ignored-properties": true,
     "declaration-block-no-shorthand-property-overrides": true,
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "declaration-block-semicolon-space-after": "always-single-line",
@@ -42,12 +41,11 @@
     "max-nesting-depth": 4,
     "media-feature-colon-space-after": "always",
     "media-feature-colon-space-before": "never",
-    "media-feature-no-missing-punctuation": true,
     "media-feature-range-operator-space-after": "always",
     "media-feature-range-operator-space-before": "always",
     "media-query-list-comma-space-after": "always-single-line",
     "media-query-list-comma-space-before": "never",
-    "media-query-parentheses-space-inside": "never",
+    "media-feature-parentheses-space-inside": "never",
     "no-eol-whitespace": true,
     "no-extra-semicolons": true,
     "no-invalid-double-slash-comments": true,
@@ -60,7 +58,7 @@
     "selector-combinator-space-before": "always",
     "selector-list-comma-space-before": "never",
     "selector-max-empty-lines": 0,
-    "selector-no-id": true,
+    "selector-max-id": 0,
     "selector-no-qualifying-type": true,
     "selector-pseudo-class-case": "lower",
     "selector-pseudo-class-parentheses-space-inside": "never",

config/gulp/build.js

@@ -1,7 +1,6 @@
 var gulp = require('gulp');
 var dutil = require('./doc-util');
-var clean = require('gulp-clean');
-var runSequence = require( 'run-sequence' );
+var del = require('del');
 
 gulp.task('clean-dist', function (done) {
 
@@ -15,7 +14,7 @@ gulp.task('clean-dist', function (done) {
 
   dutil.logMessage('clean-dist', 'Removing distribution directories.');
 
-  return gulp.src([ 'dist' ], { read: false }).pipe(clean());
+  return del('dist');
 
 });
 
@@ -34,27 +33,26 @@ gulp.task('docs', function (done) {
 
 });
 
-gulp.task('build', function (done) {
-
-  dutil.logIntroduction();
-  dutil.logMessage(
-    'build',
-    'Creating distribution directories.'
-  );
-
-  runSequence(
-    'clean-dist',
+gulp.task('build',
+  gulp.series(
+    function (done) {
+      dutil.logIntroduction();
+      dutil.logMessage(
+        'build',
+        'Creating distribution directories.'
+      );
+      done();
+      },
+    'clean-dist', 
     'docs',
-    [
+    gulp.parallel(
       'sass',
       'javascript',
       'images',
       'fonts',
-    ],
+    ),
     // We need to copy the Sass to dist *after* the sass task, to ensure
     // that vendor libraries have been copied to the Sass directory first.
     'copy-dist-sass',
-    done
-  );
-
-});
+  ),
+);

config/gulp/doc-util.js

@@ -1,6 +1,6 @@
 var pkg = require('../../package.json');
-var gutil = require('gulp-util');
-var chalk = gutil.colors;
+var log = require('fancy-log');
+var colors = require('ansi-colors');
 var notifier = require('node-notifier');
 
 var shellPrefix = '$';
@@ -9,32 +9,32 @@ function drawFlag () {
 
   // American Flag in ASCII
   //
-  gutil.log(
-    chalk.white('')
+  log(
+    colors.white('')
   );
-  gutil.log(
-    chalk.white('* * * * * ========================')
+  log(
+    colors.white('* * * * * ========================')
   );
-  gutil.log(
-    chalk.white('* * * * * ========================')
+  log(
+    colors.white('* * * * * ========================')
   );
-  gutil.log(
-    chalk.white('* * * * * ========================')
+  log(
+    colors.white('* * * * * ========================')
   );
-  gutil.log(
-    chalk.white('* * * * * ========================')
+  log(
+    colors.white('* * * * * ========================')
   );
-  gutil.log(
-    chalk.white('==================================')
+  log(
+    colors.white('==================================')
   );
-  gutil.log(
-    chalk.white('==================================')
+  log(
+    colors.white('==================================')
   );
-  gutil.log(
-    chalk.white('==================================')
+  log(
+    colors.white('==================================')
   );
-  gutil.log(
-    chalk.white('')
+  log(
+    colors.white('')
   );
 }
 
@@ -62,62 +62,58 @@ module.exports = {
 
     message = message || 'U.S. Web Design System';
 
-    gutil.log(
-      chalk.yellow('v' + pkg.version),
+    log(
+      colors.yellow('v' + pkg.version),
       message
     );
     drawFlag();
-    //gutil.log(
-      //chalk.yellow('v' + pkg.version),
-      //'The following gulp commands are available'
-    //);
 
   },
 
   logCommand: function (name, message) {
 
-    gutil.log(
+    log(
       shellPrefix,
-      chalk.cyan(name),
-      chalk.magenta(message)
+      colors.cyan(name),
+      colors.magenta(message)
     );
 
   },
 
   logHelp: function (name, message) {
 
-    gutil.log(
+    log(
       shellPrefix,
-      chalk.cyan(name),
-      chalk.yellow(message)
+      colors.cyan(name),
+      colors.yellow(message)
     );
 
   },
 
   logData: function (name, message) {
 
-    gutil.log(
-      chalk.cyan(name),
-      chalk.yellow(message)
+    log(
+      colors.cyan(name),
+      colors.yellow(message)
     );
 
   },
 
   logError: function (name, message) {
 
-    gutil.log(
-      chalk.red(name),
-      chalk.yellow(message)
+    log(
+      colors.red(name),
+      colors.yellow(message)
     );
     notify(this.dirName + ' gulp ' + name, message, true);
 
   },
 
   logMessage: function (name, message) {
 
-    gutil.log(
-      chalk.cyan(name),
-      chalk.green(message)
+    log(
+      colors.cyan(name),
+      colors.green(message)
     );
     notify(this.dirName + ' gulp ' + name, message, false);
 

config/gulp/javascript.js

@@ -1,6 +1,6 @@
 var child_process = require('child_process');
 var gulp = require('gulp');
-var gutil = require('gulp-util');
+var log = require('fancy-log');
 var dutil = require('./doc-util');
 var browserify = require('browserify');
 var buffer = require('vinyl-buffer');
@@ -37,7 +37,7 @@ gulp.task(task, function (done) {
     stream.pipe(uglify());
   }
 
-  stream.on('error', gutil.log)
+  stream.on('error', log)
     .pipe(rename({
       suffix: '.min',
     }))

config/gulp/release.js

@@ -1,11 +1,11 @@
-var gulp = require('gulp');
-var dutil = require('./doc-util');
-var spawn = require('cross-spawn');
-var runSequence = require('run-sequence');
-var del = require('del');
-var task = 'release';
+const gulp = require('gulp');
+const dutil = require('./doc-util');
+const spawn = require('cross-spawn');
+const del = require('del');
 
-gulp.task('make-tmp-directory', function (done) {
+const task = 'release';
+
+gulp.task('make-tmp-directory', () => {
 
   dutil.logMessage('make-tmp-directory', 'Creating temporary release directory.');
 
@@ -14,26 +14,26 @@ gulp.task('make-tmp-directory', function (done) {
 
 });
 
-gulp.task('clean-tmp-directory', function (done) {
+gulp.task('clean-tmp-directory', () => {
 
   dutil.logMessage('clean-tmp-directory', 'Deleting temporary release directory.');
 
   return del(dutil.dirName);
 });
 
-gulp.task('zip-archives', function (done) {
-
-  dutil.logMessage('zip-archives', 'Creating a zip archive in dist/' + dutil.dirName + '.zip');
+gulp.task('zip-archives', (done) => {
 
-  var zip = spawn('zip', [
+  const zip = spawn('zip', [
     '--log-info',
     '-r',
-    './dist/' + dutil.dirName + '.zip',
+    `./dist/${dutil.dirName}.zip`,
     dutil.dirName,
     '-x "*.DS_Store"',
   ]);
 
-  zip.stdout.on('data', function (data) {
+  dutil.logMessage('zip-archives', `Creating a zip archive in dist/${dutil.dirName}.zip`);
+
+  zip.stdout.on('data', (data) => {
 
     if (/[\w\d]+/.test(data)) {
 
@@ -43,31 +43,32 @@ gulp.task('zip-archives', function (done) {
 
   });
 
-  zip.stderr.on('data', function (data) {
+  zip.stderr.on('data', (data) => {
 
     dutil.logError('zip-archives', data);
 
   });
 
-  zip.on('error', function (error) {
+  zip.on('error', (error) => {
 
-     dutil.logError('zip-archives', 'Failed to create a zip archive');
+    dutil.logError('zip-archives', 'Failed to create a zip archive');
 
-     done(error);
+    done(error);
   });
 
-  zip.on('close', function (code) { if (0 === code) { done(); } });
+  zip.on('close', (code) => { if (code === 0) { done(); } });
 
 });
 
-gulp.task(task, [ 'build' ], function (done) {
-
-  dutil.logMessage(task, 'Creating a zip archive at dist/' + dutil.dirName + '.zip');
-
-  runSequence(
+gulp.task(task,
+  gulp.series(
+    (done) => {
+      dutil.logMessage(task, `Creating a zip archive at dist/${dutil.dirName}.zip`);
+      done();
+    },
+    'build',
     'make-tmp-directory',
     'zip-archives',
     'clean-tmp-directory',
-    done
-  );
-});
+  )
+);