Upgrade frontend pipeline

Using NodeJS 16, replaced gulp scripts with latest instance.
CSS is no longer committed, but placed in a dist folder during build

Author: vdboor

.gitignore

@@ -14,12 +14,12 @@
 .DS_Store
 .sass-cache/
 .vagrant/
-Gemfile.lock
 /dist/
 /docs/_build/
 /env/
 /logs/
-/web/media
-/stats/
+/src/frontend/static/frontend/dist/
 /src/fluentdemo/settings/local.py
 /src/node_modules/
+/web/media
+/stats/

Dockerfile

@@ -17,7 +17,7 @@ RUN find /usr/local/lib/python3.6/site-packages/ -name '*.po' -delete && \
     find /usr/local/lib/python3.6/site-packages/tinymce/ -regextype posix-egrep -not -regex '.*/langs/(en|nl).*\.js' -wholename '*/langs/*.js' -delete
 
 # Node builder
-FROM node:12-stretch as frontend-build
+FROM node:16-buster as frontend-build
 RUN mkdir -p /app/src
 WORKDIR /app/src
 COPY src/package.json src/package-lock.json /app/src/

src/.nvmrc

@@ -0,0 +1 @@
+16.8.0

src/frontend/gulp/config.js

@@ -1,13 +1,16 @@
 'use strict';
 
-const autoprefixer = require('autoprefixer'),
-  mqpacker = require('css-mqpacker'),
-  cssnano = require('cssnano'),
-  flexbugsFixes = require('postcss-flexbugs-fixes'),
+const autoprefixer = require("autoprefixer"),
+  cleanCSS = require("postcss-clean"),
+  sortMediaQueries = require('postcss-sort-media-queries'),
+  cssnano = require("cssnano"),
+  flexbugsFixes = require("postcss-flexbugs-fixes"),
   removeSelectors = require("postcss-remove-selectors");
 
-const bootstrap = 'node_modules/bootstrap/js/dist/';
-const vendor = './frontend/static/frontend/vendor/';
+const bootstrap = "node_modules/bootstrap/js/dist/";
+const vendor = "./frontend/static/frontend/vendor/";
+const frontend_js = "./frontend/static/frontend/js/";
+const dist = "./frontend/static/frontend/dist/";
 
 const NODE_ENV = process.env.NODE_ENV;
 
@@ -65,20 +68,36 @@ let postcss_plugins = [
   autoprefixer({
     cascade: false
   }),
-  mqpacker({sort: true})  // combine media queries
+  sortMediaQueries({sort: 'mobile-first'}), // combine media queries
+  /*
+  cleanCSS({
+    //format: "keep-breaks",
+    level: {
+      1: {
+        specialComments: false
+      },
+      2: {
+        all: true
+      }
+    }
+  })
+  */
 ];
 
-if(NODE_ENV === 'production') {
+console.log("postcss-clean temporary disabled due to node.getIterator() bug");
+
+if (NODE_ENV === "production") {
   postcss_plugins.push(cssnano());
 }
 
 
 module.exports = {
   paths: {
-    sass: './frontend/sass/',
-    sass_glob: './frontend/sass/**/*.scss',
-    css: './frontend/static/frontend/css/',
-    images: './frontend/static/frontend/images/',
+    sass: "./frontend/sass/",
+    sass_glob: "./frontend/sass/**/*.scss",
+    css: "./frontend/static/frontend/css/",
+    dist: "./frontend/static/frontend/dist/",
+    images: "./frontend/static/frontend/images/",
     vendor: vendor
   },
 
@@ -88,34 +107,31 @@ module.exports = {
         'node_modules/jquery/dist/jquery.min.js',
         'node_modules/@popperjs/core/dist/umd/popper.min.js'
       ],
-      dest: vendor
+      dest: dist
     },
     {
       src: [
         bootstrap + 'util.js',
         bootstrap + 'collapse.js',  // mobile menu
         bootstrap + 'dropdown.js'  // menu
       ],
-      dest: vendor,
+      dest: dist,
       concat: "bootstrap.min.js",
       minify: true
     }
   ],
 
   sass_options: {
     // See https://github.com/sass/node-sass
-    outputStyle: NODE_ENV === 'production' ? 'compressed' : 'expanded',
-    includePaths: [
-      './frontend/sass-vendor/',
-      './node_modules/'
-    ],
+    outputStyle: NODE_ENV === "production" ? "compressed" : "expanded",
+    includePaths: ["./frontend/sass-vendor/", "./node_modules/"],
     precision: 5
   },
 
   postcss_plugins: postcss_plugins,
 
   livereload_options: {
-    host: '127.0.0.1',
+    host: "127.0.0.1",
     port: 35729
   },
 
@@ -125,7 +141,15 @@ module.exports = {
   },
 
   pngquant_options: {
-    quality: '40-100',
+    speed: 1,
+    strip: true,
+    quality: [0.65, 0.8],
     verbose: true
+  },
+
+  webp_options: {
+    // preset: "default",
+    quality: 80,
+    method: 6
   }
 };

src/frontend/gulp/tasks/clean.js

@@ -1,16 +1,17 @@
-'use strict';
+"use strict";
 
-const gulp = require('gulp'),
-  del = require('del'),
-  config = require('../config');
+const gulp = require("gulp"),
+  del = require("del"),
+  config = require("../config");
 
 function clean() {
   // clean task
   return del([
-    config.paths.css + '*.css',
+    config.paths.css + "*.css",
+    config.paths.dist,
     config.paths.vendor,
-    '!' + config.paths.css + 'user-styles.css'
+    "!" + config.paths.css + "user-styles.css"
   ]);
 }
 
-gulp.task('clean', clean);
+gulp.task("clean", clean);

src/frontend/gulp/tasks/imagemin.js

@@ -1,20 +1,43 @@
-const gulp = require('gulp'),
-  plumber = require('gulp-plumber'),
-  imagemin = require('gulp-imagemin'),
-  imageminPngquant = require('imagemin-pngquant'),
-  imageminMozjpeg = require('imagemin-mozjpeg'),
-  config = require('../config');
+const gulp = require("gulp"),
+  webp = require('gulp-webp'),
+  merge = require("merge-stream"),
+  plumber = require("gulp-plumber"),
+  imagemin = require("gulp-imagemin"),
+  imageminPngquant = require("imagemin-pngquant"),
+  imageminMozjpeg = require("imagemin-mozjpeg"),
+  size = require("gulp-size"),
+  config = require("../config");
 
 function minifyImages() {
-  return gulp.src(config.paths.images + '**/*.{png,jpg,jpeg}')
+  const pngs = gulp
+    .src(config.paths.images + "**/*.png")
     .pipe(plumber())
-    .pipe(imagemin({
-      use: [
-        imageminPngquant(config.pngquant_options),
-        imageminMozjpeg(config.mozjpeg_options)
-      ]
-    }))
-    .pipe(gulp.dest(config.paths.images));
+    .pipe(imagemin([imageminPngquant(config.pngquant_options)]))
+    .pipe(size({ showFiles: true, showTotal: false }))
+    .pipe(gulp.dest(config.paths.dist));
+
+  const jpegs = gulp
+    .src(config.paths.images + "**/*.{jpg,jpeg}")
+    .pipe(plumber())
+    .pipe(imagemin([imageminMozjpeg(config.mozjpeg_options)]))
+    .pipe(size({ showFiles: true, showTotal: false }))
+    .pipe(gulp.dest(config.paths.dist));
+
+  const pngsToWebp = gulp
+    .src(config.paths.images + "**/*.png")
+    .pipe(plumber())
+    .pipe(webp({lossless: true, ...config.webp_options}))
+    .pipe(size({ showFiles: true, showTotal: false }))
+    .pipe(gulp.dest(config.paths.dist));
+
+  const jpegsToWebp = gulp
+    .src(config.paths.images + "**/*.{jpg,jpeg}")
+    .pipe(plumber())
+    .pipe(webp({lessless: false, ...config.webp_options}))
+    .pipe(size({ showFiles: true, showTotal: false }))
+    .pipe(gulp.dest(config.paths.dist));
+
+  return merge(pngs, jpegs, pngsToWebp, jpegsToWebp);
 }
 
-gulp.task('imagemin', minifyImages);
+gulp.task("imagemin", minifyImages);

src/frontend/gulp/tasks/sass.js

@@ -1,54 +1,62 @@
-'use strict';
-
-const gulp = require('gulp'),
-  filesExist = require('files-exist'),
-  plumber = require('gulp-plumber'),
-  gulpSass = require('gulp-sass'),
-  sourcemaps = require('gulp-sourcemaps'),
-  livereload = require('gulp-livereload'),
-  postcss = require('gulp-postcss'),
-  notify = require('gulp-notify'),
-  size = require('gulp-size'),
-  config = require('../config');
+"use strict";
+
+const gulp = require("gulp"),
+  filesExist = require("files-exist"),
+  plumber = require("gulp-plumber"),
+  gulpSass = require("gulp-sass")(require('node-sass')),
+  sourcemaps = require("gulp-sourcemaps"),
+  livereload = require("gulp-livereload"),
+  postcss = require("gulp-postcss"),
+  notify = require("gulp-notify"),
+  size = require("gulp-size"),
+  config = require("../config");
 
 var NODE_ENV = process.env.NODE_ENV;
 
-
 function handleErrors() {
   var args = Array.prototype.slice.call(arguments);
+  console.error(args);
 
   // Alternative instead of default sass.logError
   // Send error to Mac notification center with gulp-notify:
-  notify.onError({
-    title: "Compile Error",
-    message: "<%= error.message %>"
-  }).apply(this, args);
-
-  this.emit('end');
+  notify
+    .onError({
+      title: "Compile Error",
+      message: "<%= error.message %>"
+    })
+    .apply(this, args);
+
+  this.emit("end");
 }
 
-
 function sass() {
   // Task to compile sass
-  return gulp.src(filesExist(config.paths.sass_glob))
-    .pipe(plumber({errorHandler: handleErrors}))
+  return gulp
+    .src(filesExist(config.paths.sass_glob))
+    .pipe(plumber({ errorHandler: handleErrors }))
     .pipe(sourcemaps.init())
     .pipe(gulpSass(config.sass_options))
     .pipe(postcss(config.postcss_plugins))
-    .pipe(sourcemaps.write('.'))
-    .pipe(size({showFiles: true}))
-    .pipe(gulp.dest(config.paths.css))
-    .pipe(livereload())
+    .pipe(sourcemaps.write("."))
+    .pipe(size({ showFiles: true }))
+    .pipe(gulp.dest(config.paths.dist))
+    .pipe(livereload());
 }
 
-
 function sassWatch() {
   // Watch and recompile on changes
-  return gulp.watch(config.paths.sass_glob, sass)
-    .on('all', function (event, path, stats) {
-      console.log('[watcher] File ' + path.replace(/.*(?=sass)/, '') + ' was ' + event + ', compiling...');
+  return gulp
+    .watch(config.paths.sass_glob, sass)
+    .on("all", function(event, path, stats) {
+      console.log(
+        "[watcher] File " +
+          path.replace(/.*(?=sass\/)/, "") +
+          " was " +
+          event +
+          ", compiling..."
+      );
     });
 }
 
-gulp.task('sass', sass);
-gulp.task('sass:watch', gulp.series(sass, sassWatch));
+gulp.task("sass", sass);
+gulp.task("sass:watch", gulp.series(sass, sassWatch));