Merge pull request #1007 from CDLUC3/develop

Merge develop into main

Author: sfisher

gulpfile.js

@@ -6,16 +6,16 @@
 // ##### Gulp Tasks #####
 
 var { src, dest, watch, series, parallel } = require('gulp');
-var sass = require('gulp-sass')(require('node-sass'));
-var autoprefixer = require('gulp-autoprefixer');
+var path = require('path');
+var sass = require('gulp-sass')(require('sass'));
+var autoprefixer = require('autoprefixer');
 var browserSync = require('browser-sync');
 var server = browserSync.create();
+var through2 = require('through2');
 var useref = require('gulp-useref');
 var uglify = require('gulp-uglify');
 var gulpIf = require('gulp-if');
 var cleanCSS = require('gulp-clean-css');
-var imagemin = require('gulp-imagemin');
-var cache = require('gulp-cache');
 var del = require('del');
 var modernizr = require('gulp-modernizr');
 var stylelint = require('stylelint');
@@ -25,6 +25,8 @@ var ssi = require('browsersync-ssi');
 var postcss = require('gulp-postcss');
 var assets = require('postcss-assets');
 var ghPages = require('gulp-gh-pages');
+var sharp = require('sharp');
+var optimizeSvg = require('svgo').optimize;
 
 // Public Tasks:
 
@@ -37,29 +39,45 @@ exports.upload = githubpages;
 
 exports.modernizr = runmodernizr;
 
-// Process scss to css, add sourcemaps, inline font & image files into css:
+exports.scsslint_legacy = scsslint_legacy;
 
-sass.compiler = require('node-sass');
+// Process scss to css, add sourcemaps, inline font & image files into css:
 
-function scss(cb) {
+sass.compiler = require('sass');
+
+// Temporary deprecation-noise reduction while legacy SCSS is still being modernized.
+var dartSassOptions = {
+  quietDeps: true,
+  silenceDeprecations: [
+    'legacy-js-api',
+    'import',
+    'global-builtin',
+    'color-functions',
+    'slash-div',
+    'if-function'
+  ]
+};
+
+function scss() {
   return src('dev/scss/*.scss', { sourcemaps: true })
-  .pipe(sass().on('error', sass.logError))
-  .pipe(autoprefixer('last 2 versions'))
-  .pipe(postcss([assets({
+  .pipe(sass(dartSassOptions).on('error', sass.logError))
+  .pipe(postcss([autoprefixer({
+    overrideBrowserslist: ['last 2 versions']
+  }), assets({
     loadPaths: ['fonts/', 'images/']
   })]))
   .pipe(dest('dev/css', { sourcemaps: 'sourcemaps' }))
   .pipe(browserSync.stream());
-  cb();
 }
 
-function scss_legacy(cb) {
+function scss_legacy() {
   return src('dev/legacy-scss/*.scss', { sourcemaps: true })
-  .pipe(sass().on('error', sass.logError))
-  .pipe(autoprefixer('last 2 versions'))
+  .pipe(sass(dartSassOptions).on('error', sass.logError))
+  .pipe(postcss([autoprefixer({
+    overrideBrowserslist: ['last 2 versions']
+  })]))
   .pipe(dest('dev/legacy-scss/css', { sourcemaps: 'sourcemaps' }))
   .pipe(browserSync.stream());
-  cb();
 }
 
 // Watch scss, html, and js and reload browser if any changes:
@@ -94,113 +112,159 @@ function start(cb) {
 
 // Minify and uglify css and js from paths within useref comment tags in html:
 
-function assemble(cb) {
+function assemble() {
   return src(['dev/**/*.html', '!dev/includes/*', 'dev/css/*.css'])
   .pipe(gulpIf('*.js', uglify()))
   .pipe(useref())
   .pipe(lbInclude()) // parse <!--#include file="" --> statements
   .pipe(dest('ui_library'))
-  cb();
 }
 
-function minifyCss(cb) {
+function minifyCss() {
   return src(['dev/css/*.css'])
   .pipe(cleanCSS({debug: true, level: 2}, (details) => {
     console.log(`${details.name}: ${details.stats.originalSize}`);
     console.log(`${details.name}: ${details.stats.minifiedSize}`);
   }))
   .pipe(dest('ui_library'))
-  cb();
 }
 
 // Compress images and copy from dev/images/ into dev/ui_library/images/:
 
-function copyimages(cb) {
+function copyimages() {
   return src('dev/images/**/*.+(png|jpg|jpeg|gif|svg)')
-  .pipe(cache(imagemin({
-      interlaced: true
-    })))
-  .pipe(dest('ui_library/images'))
-  cb();
+    .pipe(through2.obj(function (file, enc, cb) {
+      if (file.isNull()) {
+        cb(null, file);
+        return;
+      }
+
+      if (file.isStream()) {
+        cb(new Error('Streaming images are not supported by copyimages.'));
+        return;
+      }
+
+      var extension = path.extname(file.path).toLowerCase();
+
+      if (extension === '.svg') {
+        try {
+          var result = optimizeSvg(file.contents.toString(enc || 'utf8'), {
+            path: file.path,
+            multipass: true,
+            plugins: [
+              {
+                name: 'preset-default'
+              }
+            ]
+          });
+
+          file.contents = Buffer.from(result.data);
+          cb(null, file);
+        } catch (error) {
+          cb(error);
+        }
+
+        return;
+      }
+
+      if (extension === '.png' || extension === '.jpg' || extension === '.jpeg') {
+        sharp(file.contents)
+          .rotate()
+          [extension === '.png' ? 'png' : 'jpeg'](extension === '.png'
+            ? {
+              compressionLevel: 9,
+              progressive: true
+            }
+            : {
+              mozjpeg: true,
+              quality: 82,
+              progressive: true
+            })
+          .toBuffer()
+          .then(function (buffer) {
+            file.contents = buffer;
+            cb(null, file);
+          })
+          .catch(function (error) {
+            cb(error);
+          });
+
+        return;
+      }
+
+      cb(null, file);
+    }))
+    .pipe(dest('ui_library/images'));
 }
 
 // Copy the minified css to the place it actually needs to go in order to function
-function copyCSS(cb) {
+function copyCSS() {
   return src('ui_library/css/main2.min.css')
     .pipe(dest('static_src/stylesheets'));
-  cb();
 }
 
 // Copy the minified js to the place it actually needs to go in order to function
-function copyJS(cb) {
+function copyJS() {
   return src('ui_library/js/main2.min.js')
     .pipe(dest('static_src/javascripts'));
-  cb();
 }
 
 // Copy font files from dev/fonts/ into dev/ui_library/fonts/:
 
-function fonts(cb) {
+function fonts() {
   return src('dev/fonts/**/*')
   .pipe(dest('ui_library/fonts'))
-  cb();
 }
 
 // Delete ui_library directory at start of build process:
 
-function clean(cb) {
+function clean() {
   return del('ui_library');
-  cb();
 }
 
 // Lint Sass:
 
-function scsslint(cb) {
+function scsslint() {
   return src(['dev/scss/*.scss', '!dev/scss/vendor/*.scss'])
   .pipe(stylelint({
     reporters: [
       {formatter: 'string', console: true}
     ]
   }));
-  cb();
 }
 
-function scsslint_legacy(cb) {
+function scsslint_legacy() {
   return src(['dev/legacy-scss/*.scss', '!dev/legacy-scss/vendor/*.scss'])
   .pipe(stylelint({
     reporters: [
       {formatter: 'string', console: true}
     ]
   }));
-  cb();
 }
 
 
 
 // Lint JavaScript:
 
-function jslint(cb) {
+function jslint() {
   return src(['dev/js/**/*.js', '!dev/js/vendor/*.js'])
   .pipe(jshint({ esversion: 6 }))
   .pipe(jshint.reporter('default'))
-  cb();
 }
 
 // Upload ui_library build to GitHub Pages:
 
-function githubpages(cb) {
+function githubpages() {
   return src('./ui_library/**/*')
   .pipe(ghPages())
-  cb();
 }
 
 // Run "gulp modernizr" to build a custom modernizr file based off of classes found in CSS:
 
-function runmodernizr(cb) {
+function runmodernizr() {
   return src('dev/css/main2.css') // where modernizr will look for classes
   .pipe(modernizr({
     options: ['setClasses'],
     dest: 'dev/js/modernizr-custombuild.js'
   }))
-  cb();
 }