Merge pull request #8 from ucdavis/gulp4

Update Gulp to version 4

README.md

@@ -70,13 +70,6 @@ $ cp node_modules/ucd-theme-tasks/.sass-lint.yml .sass-lint.yml
 ```
 
 ## Gulp Tasks
-### Get Help
-`gulp help` - The quickest way to see what each task does is to run `gulp help`. This will
-list out each of the tasks with a description of what it does.
-
-There are several gulp tasks which can be run individually, however it is often
-easier to run one of the primary tasks which will start smaller tasks
-automatically.
 
 ### Primary Tasks
 1. `gulp` - Generate the production code and start watching for changes.

docs/config.md

@@ -5,22 +5,16 @@
 * __vendor__ - (Array) List of vendor CSS files to include in compilation. Compiles to `vendor.css`.
 * __autoVendor__ - (Boolean) Set to `true` if you want css files automatically loaded into the `vendor.css` file from each npm package added as a dependency. It will first look for a `dist` folder in each package and then add the css files. If no `dist` folder is found then it will add all css files in the package. You can disable this, but it means that you will have to manually add any css file directly into the `vendor` array. This is useful if you find yourself spending more time excluding files and it would be simpler to explicitly add them manually.
 * __dest__ - The location to place the compiled CSS.
-* __flattenDestOutput__ - (Boolean) value for minification of compiled CSS.
+* __flattenDestOutput__ - (Boolean) Defaults to `true` for turning the source directory tree into a single output layer. All files in the destination folder will be siblings on the same level.
 * __lint__ - Validate code standards with [sass-lint](https://github.com/sasstools/sass-lint).
    * __enabled__ - (Boolean) to turn CSS code validation on or off.
    * __failOnError__ - (Boolean) to stop code from compiling if it does not validate.
    * __extraSrc__ - (Array) Add paths to files that you would like to be included in CSS validation. You may exclude files from this process by placing them here, but prefixing the path with an exclamation point. This is the boolean NOT operator also called negation.
 * __sourceComments__ - (Boolean) to leave or strip comments from the compiled CSS code.
 * __sourceMapEmbed__ - (Boolean) for adding CSS source maps for in browser SASS debugging.
 * __outputStyle__ - Tell the compiler whether you want `expanded` or `compressed` output code.
-* __autoPrefixerBrowsers__ - (Array) List browsers you would like vendor prefixes generated for. [https://github.com/ai/browserslist#queries](https://github.com/ai/browserslist#queries)
-* __sassdoc__ - Settings for generated SASS documentation. [http://sassdoc.com](http://sassdoc.com)
-    * __enabled__ - (Boolean) to generate SASS Docs.
-    * __dest__ - Destination for SASS Documentation code.
-    * __verbose__ - (Boolean) value to enable or disable verbose mode
-    * __basePath__ - The SASS base path from the public repository. Notice in the config file this has a child element of "exclude" that you can use to exclude files from this base path.
-    * __theme__ - Set the theme to be used to display the SASS Docs. We are using "default".
-    * __sort__ - (Array) Set the sort order of the documentation. [http://sassdoc.com/customising-the-view/#sort](http://sassdoc.com/customising-the-view/#sort)
+* __autoPrefixerBrowsers__ - (Array) Override the default browser list you would like vendor prefixes generated for. By default this is empty so that defaults are used because it is recommended to put this array directly into your `package.json` file. [https://github.com/postcss/autoprefixer#browsers](https://github.com/postcss/autoprefixer#browsers)
+
 
 ## js
 
@@ -41,7 +35,7 @@
 
 * __enabled__ - (Boolean) value for including NPM files.
 * __dir__ - Path to NPM node modules file directory.
-* __includePaths__ - (Array) List of npm directory paths to look for files such as `node__modules/singularitygs/stylesheets`
+* __includePaths__ - (Array) List of npm directory paths to look for files such as `node_modules/breakpoint-sass/stylesheets`
 
 
 ## browserSync:
@@ -51,13 +45,14 @@
 * __enabled__ - (Boolean) value to turn on Browser Sync as part of the "watch" Gulp task.
 * __port__ - The port on which to serve the the site locally.
 * __watchFiles__ - (Array) Define specific files of file types to watch.
-* __domain__ - Specify a domain at which serve the files in the browser.
+* __domain__ - Specify a domain at which to serve the files in the browser.
 * __baseDir__ - Specify the base directory.
 * __startPath__ - The path at which to open the browser. This path gets appended to the "domain".
 * __openBrowserAtStart__ - (Boolean) value to allow browser to be automatically opened when "watch" task is initiated.
 * __browser__ - (Array) List the browser you would like to be used when a browser is opened automatically. On Windows, try `'chrome'` instead of`'Google Chrome'` if you get an alert saying that Google Chrome can't run.
 * __reloadDelay__ - Time, in milliseconds, to wait before instructing the browser to reload/inject following a file change event
 * __reloadDebounce__ - Wait, in milliseconds, for a specified window of event-silence before sending any reload events.
+* __optionOverrides__ - (Object) Override any options for more controle. See [https://www.browsersync.io/docs/options](https://www.browsersync.io/docs/options)
 
 
 ## themeSync:

docs/css.md

@@ -12,7 +12,6 @@ The following Sass libraries have been added for ease in development:
 * [normalize-scss](https://github.com/JohnAlbin/normalize-scss) - Normalize CSS reset
 * [sass-burger](http://joren.co/sass-burger/) - Hambuger Menu
 * [sass-toolkit](https://github.com/at-import/toolkit) - Various helper mixins
-* [singularitygs](https://github.com/at-import/Singularity) - Grid system (you should actually use [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) if possible)
 
 
 ### NPM CSS Dependencies (using in the browser)

gulp-config.default.js

@@ -19,22 +19,7 @@ module.exports = {
     sourceComments: false,
     sourceMapEmbed: false,
     outputStyle: 'compressed',
-    autoPrefixerBrowsers: [
-      'last 2 versions',
-      'IE >= 9'
-    ],
-    sassdoc: {
-      enabled: false,
-      dest: 'public/sassdoc',
-      verbose: false,
-      basePath: '', // Link to git repo sass directory.
-      theme: 'default',
-      sort: [
-        'file',
-        'group',
-        'line<'
-      ]
-    }
+    autoPrefixerBrowsers: [] // https://github.com/postcss/autoprefixer#browsers
   },
   js: {
     enabled: true,
@@ -59,7 +44,6 @@ module.exports = {
     enabled: true,
     dir: 'node_modules',
     includePaths: [
-      'node_modules/singularitygs/stylesheets',
       'node_modules/breakpoint-sass/stylesheets',
       'node_modules/sass-toolkit/stylesheets',
       'node_modules/sass-burger',
@@ -78,7 +62,8 @@ module.exports = {
       'Google Chrome'
     ],
     reloadDelay: 50,
-    reloadDebounce: 750
+    reloadDebounce: 750,
+    optionOverrides: null
   },
   themeSync: {
     enabled: false,

gulp_tasks/browser-sync.js

@@ -1,6 +1,6 @@
 const browserSync = require('browser-sync').create('server');
 
-module.exports = function (gulp, config, tasks) {
+module.exports = (gulp, config, tasks) => {
 
   let watchFiles = [];
 
@@ -16,7 +16,7 @@ module.exports = function (gulp, config, tasks) {
 
   // Define specific files to watch
   if (config.browserSync.watchFiles) {
-    config.browserSync.watchFiles.forEach(function (file) {
+    config.browserSync.watchFiles.forEach((file) => {
       watchFiles.push(file);
     });
   }
@@ -33,8 +33,15 @@ module.exports = function (gulp, config, tasks) {
   if (config.browserSync.domain) {
     Object.assign(options, {
       proxy: config.browserSync.domain,
+      host: config.browserSync.domain.replace(/(^\w+:|^)\/\//, ''),
       startPath: config.browserSync.startPath
     });
+
+    if (config.browserSync.openBrowserAtStart === true) {
+      Object.assign(options, {
+        open: 'external'
+      });
+    }
   }
   else {
     Object.assign(options, {
@@ -45,11 +52,13 @@ module.exports = function (gulp, config, tasks) {
     });
   }
 
-  // Set all the "compile" tasks as dependencies before serving the site.
-  const dependencies = tasks.compile
+  // Override all options.
+  if (config.browserSync.optionOverrides) {
+    Object.assign(options, config.browserSync.optionOverrides);
+  }
 
-  gulp.task('serve', 'Create a local server using BrowserSync', dependencies, function () {
+  // Create a local server using BrowserSync.
+  gulp.task('serve', () => {
     return browserSync.init(options);
   });
-  tasks.default.push('serve');
 };

gulp_tasks/css.js

@@ -9,19 +9,26 @@ const plumber = require('gulp-plumber');
 const notify = require('gulp-notify');
 const flatten = require('gulp-flatten');
 const gulpif = require('gulp-if');
-const sassdoc = require('sassdoc');
 const concat = require('gulp-concat');
 const cssnano = require('gulp-cssnano');
 const fs = require('fs');
 
-module.exports = function (gulp, config, tasks) {
+module.exports = (gulp, config, tasks) => {
+
+  // Compile Sass to CSS using Libsass with Autoprefixer and SourceMaps.
+  gulp.task('sass', (done) => {
+    // Set up a browserList object.
+    let browserList = {}
+    if (config.css.autoPrefixerBrowsers && config.css.autoPrefixerBrowsers.length > 0) {
+      browserList = {
+        overrideBrowserslist: config.css.autoPrefixerBrowsers
+      }
+    }
 
-  // Compile Sass
-  gulp.task('sass', 'Compile Sass to CSS using Libsass with Autoprefixer and SourceMaps', function (done) {
     gulp.src(config.css.src)
       .pipe(sassGlob())
       .pipe(plumber({
-        errorHandler: function (error) {
+        errorHandler: (error) => {
           notify.onError({
             title: 'CSS <%= error.name %> - Line <%= error.line %>',
             message: '<%= error.message %>'
@@ -39,23 +46,21 @@ module.exports = function (gulp, config, tasks) {
       }).on('error', sass.logError))
       .pipe(postcss(
         [
-          autoprefixer({
-            browsers: config.css.autoPrefixerBrowsers
-          })
+          autoprefixer(browserList)
         ]
       ))
       .pipe(sourcemaps.write((config.css.sourceMapEmbed) ? null : './'))
       .pipe(gulpif(config.css.flattenDestOutput, flatten()))
       .pipe(gulp.dest(config.css.dest))
-      .on('end', function () {
+      .on('end', () => {
         done();
       });
   });
   tasks.compile.push('sass');
 
 
-  // Vendor and NPM compile
-  gulp.task('css:vendor', 'Compile all vendor css (including NPM Dependencies) into a single vendor.css file', function () {
+  // Compile all vendor css (including NPM Dependencies) into a single vendor.css file
+  gulp.task('css:vendor', () => {
     let sources = [];
 
     if (config.css.autoVendor) {
@@ -105,8 +110,8 @@ module.exports = function (gulp, config, tasks) {
   tasks.compile.push('css:vendor');
 
 
-  // Validate with Lint
-  gulp.task('validate:css', 'Lint Sass files with Sass-lint', function () {
+  // Validate Sass files with Sass-lint
+  gulp.task('validate:css', () => {
     let src = config.css.src;
     if (config.css.lint.extraSrc) {
       src = src.concat(config.css.lint.extraSrc);
@@ -121,33 +126,15 @@ module.exports = function (gulp, config, tasks) {
     tasks.validate.push('validate:css');
   }
 
-
-  // Documentation automated by SassDoc
-  gulp.task('docs:css', 'Build CSS docs using SassDoc', function () {
-    return gulp.src(config.css.src)
-      .pipe(sassdoc({
-        dest: config.css.sassdoc.dest,
-        verbose: config.css.sassdoc.verbose,
-        basePath: config.css.sassdoc.basePath,
-        exclude: config.css.sassdoc.exclude,
-        theme: config.css.sassdoc.theme,
-        sort: config.css.sassdoc.sort
-      }));
-  });
-  if (config.css.sassdoc.enabled) {
-    tasks.compile.push('docs:css');
-  }
-
   // Watch for changes
-  gulp.task('watch:css', function () {
+  gulp.task('watch:css', async () => {
     let tasks = ['sass'];
     if (config.css.lint.enabled) {
       tasks.push('validate:css');
     }
-    if (config.css.sassdoc.enabled) {
-      tasks.push('docs:css');
-    }
-    return gulp.watch(config.css.src, tasks);
+
+    const watcher = gulp.watch(config.css.src);
+    watcher.on('all', gulp.parallel(tasks));
   });
   tasks.watch.push('watch:css');
 

gulp_tasks/js.js

@@ -1,13 +1,14 @@
 const cached = require('gulp-cached');
 const eslint = require('gulp-eslint');
 const gulpif = require('gulp-if');
+const plumber = require('gulp-plumber');
 const webpack = require('webpack');
 const webpackStream = require('webpack-stream');
 
-module.exports = function (gulp, config, tasks) {
+module.exports = (gulp, config, tasks) => {
 
-  // Compile custom javascript
-  gulp.task('js', 'Compile custom javascript, concat and uglify into a single ' + config.js.destName + ' file.', function (done) {
+  // Compile custom javascript, concat and uglify into a single file.
+  gulp.task('js', (done) => {
 
     const webpackConfig = {
       mode: (config.js.uglify) ? 'production' : 'development',
@@ -36,17 +37,18 @@ module.exports = function (gulp, config, tasks) {
     }
 
     gulp.src(config.js.src)
+      .pipe(plumber())
       .pipe(webpackStream(webpackConfig, webpack))
       .pipe(gulp.dest(config.js.dest))
-      .on('end', function () {
+      .on('end', () => {
         done();
       });
   });
   tasks.compile.push('js');
 
 
-  // Validate using ESlint
-  gulp.task('validate:js', 'Lint JS using ESlint', function () {
+  // Validate JS using ESlint
+  gulp.task('validate:js', () => {
     let src = config.js.src;
     if (config.js.eslint.extraSrc) {
       src = src.concat(config.js.eslint.extraSrc);
@@ -61,12 +63,14 @@ module.exports = function (gulp, config, tasks) {
 
 
   // Watch for changes
-  gulp.task('watch:js', function () {
+  gulp.task('watch:js', async () => {
     let tasks = ['js'];
     if (config.js.eslint.enabled) {
       tasks.push('validate:js');
     }
-    return gulp.watch(config.js.src, tasks);
+
+    const watcher = gulp.watch(config.js.src);
+    watcher.on('all', gulp.parallel(tasks));
   });
   tasks.watch.push('watch:js');
 

gulp_tasks/newsite.js

@@ -1,40 +1,40 @@
 const copy = require('recursive-copy');
 
-module.exports = function (gulp, config, tasks) {
+module.exports = (gulp, config, tasks) => {
 
   // Start a new project with Gulp, sass, js and config ready to go
-  gulp.task('newsite', 'Start a new site with gulp and config wired up.', function () {
+  gulp.task('newsite', async () => {
 
     // Copy the starterkit to its new location.
     copy('starterkit', config.themeSync.dest, {dot: true})
-      .then(function(results) {
+      .then((results) => {
         console.info('Starterkit directory structure copied.');
 
         // Copy root files.
         copy('./', config.themeSync.dest, {dot: true, filter: ['.eslintrc.yml', '.sass-lint.yml', 'gulpfile.js']})
-          .catch(function(error) {
+          .catch((error) => {
             console.error('Root files Copy failed: ' + error);
           });
 
         // Copy Sass directory.
         copy(config.themeSync.sassSrc, config.themeSync.dest + config.themeSync.sassDest, {overwrite: true})
-          .catch(function(error) {
+          .catch((error) => {
             console.error('Sass directory Copy failed: ' + error);
           });
 
         // Copy JS directory.
         copy(config.themeSync.jsSrc, config.themeSync.dest + config.themeSync.jsDest, {overwrite: true})
-          .catch(function(error) {
+          .catch((error) => {
             console.error('Js directory Copy failed: ' + error);
           });
 
         // Copy Images directory.
         copy(config.themeSync.imagesSrc, config.themeSync.dest + config.themeSync.imagesDest, {filter: ['**/*', '!sample/**/*', '!sample' ]})
-          .catch(function(error) {
+          .catch((error) => {
             console.error('Images directory Copy failed: ' + error);
           });
       })
-      .catch(function(error) {
+      .catch((error) => {
         console.error('Starterkit Copy failed: ' + error);
       });