From 35b37320ddb97af90ff9795a7955fc5295408761 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 21 Dec 2023 02:32:36 +0000 Subject: [PATCH 1/5] Bump gulp-filter from 7.0.0 to 9.0.1 in /csunplugged Bumps [gulp-filter](https://github.com/sindresorhus/gulp-filter) from 7.0.0 to 9.0.1. - [Release notes](https://github.com/sindresorhus/gulp-filter/releases) - [Commits](https://github.com/sindresorhus/gulp-filter/compare/v7.0.0...v9.0.1) --- updated-dependencies: - dependency-name: gulp-filter dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- csunplugged/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/csunplugged/package.json b/csunplugged/package.json index 8948b1cc4..f61925bb9 100644 --- a/csunplugged/package.json +++ b/csunplugged/package.json @@ -18,7 +18,7 @@ "gulp-concat": "2.6.1", "gulp-dependents": "1.2.5", "gulp-error-handle": "1.0.1", - "gulp-filter": "7.0.0", + "gulp-filter": "9.0.1", "gulp-if": "3.0.0", "gulp-imagemin": "7.1.0", "gulp-postcss": "9.0.1", From 1c704c21c849d6ad5bbd0c7d6a14e0acab60dbab Mon Sep 17 00:00:00 2001 From: jhn27 Date: Thu, 21 Dec 2023 15:33:44 +1300 Subject: [PATCH 2/5] use latest node LTS version --- infrastructure/local/node/Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/infrastructure/local/node/Dockerfile b/infrastructure/local/node/Dockerfile index 572fbe1d6..883356951 100644 --- a/infrastructure/local/node/Dockerfile +++ b/infrastructure/local/node/Dockerfile @@ -1,4 +1,4 @@ -FROM node:14.17.0-buster +FROM node:20-buster ARG DOCKER_UID=1000 RUN usermod -u $DOCKER_UID node From 4ca5c4eed83d8c0a91d593b131d00532b520bae6 Mon Sep 17 00:00:00 2001 From: jhn27 Date: Thu, 21 Dec 2023 15:38:20 +1300 Subject: [PATCH 3/5] switch to es module --- csunplugged/gulpfile.js | 245 ---------------------------------------- 1 file changed, 245 deletions(-) delete mode 100644 csunplugged/gulpfile.js diff --git a/csunplugged/gulpfile.js b/csunplugged/gulpfile.js deleted file mode 100644 index b97941896..000000000 --- a/csunplugged/gulpfile.js +++ /dev/null @@ -1,245 +0,0 @@ -//////////////////////////////// -// Setup -//////////////////////////////// - -// Gulp and package -const { src, dest, parallel, series, watch, lastRun } = require('gulp') -const pjson = require('./package.json') - -// Plugins -const autoprefixer = require('autoprefixer') -const browserify = require('browserify') -const browserSync = require('browser-sync').create() -const buffer = require('vinyl-buffer'); -const c = require('ansi-colors') -const concat = require('gulp-concat') -const cssnano = require('cssnano') -const dependents = require('gulp-dependents') -const errorHandler = require('gulp-error-handle') -const filter = require('gulp-filter') -const gulpif = require('gulp-if'); -const { hideBin } = require('yargs/helpers') -const imagemin = require('gulp-imagemin') -const log = require('fancy-log') -const pixrem = require('pixrem') -const postcss = require('gulp-postcss') -const postcssFlexbugFixes = require('postcss-flexbugs-fixes') -const reload = browserSync.reload -const sass = require('gulp-sass')(require('sass')); -const sourcemaps = require('gulp-sourcemaps') -const spawn = require('child_process').spawn -const tap = require('gulp-tap') -const terser = require('gulp-terser') -const yargs = require('yargs/yargs') - -// Arguments -const argv = yargs(hideBin(process.argv)).argv -const PRODUCTION = !!argv.production; - -// Relative paths function -function pathsConfig(appName) { - this.app = `./${pjson.name}` - const vendorsRoot = 'node_modules' - const staticSourceRoot = 'static' - const staticOutputRoot = 'build' - - return { - app: this.app, - // Source files - bootstrap_source: `${vendorsRoot}/bootstrap/scss`, - css_source: `${staticSourceRoot}/css`, - scss_source: `${staticSourceRoot}/scss`, - js_source: `${staticSourceRoot}/js`, - images_source: `${staticSourceRoot}/img`, - files_source: `${staticSourceRoot}/files`, - fonts_source: `${staticSourceRoot}/fonts`, - vendor_js_source: [ - `${vendorsRoot}/jquery/dist/jquery.js`, - `${vendorsRoot}/popper.js/dist/umd/popper.js`, - `${vendorsRoot}/bootstrap/dist/js/bootstrap.js`, - `${vendorsRoot}/details-element-polyfill/dist/details-element-polyfill.js`, - `${vendorsRoot}/scratchblocks/build/scratchblocks.min.js`, - `${vendorsRoot}/multiple-select/dist/multiple-select-es.js`, - ], - // Output files - css_output: `${staticOutputRoot}/css`, - images_output: `${staticOutputRoot}/img`, - js_output: `${staticOutputRoot}/js`, - files_output: `${staticOutputRoot}/files`, - fonts_output: `${staticOutputRoot}/fonts`, - } -} - -var paths = pathsConfig() - -function catchError(error) { - log.error( - c.bgRed('Error:'), - c.red(error) - ); - this.emit('end'); -} - -//////////////////////////////// -// Config -//////////////////////////////// - -// CSS/SCSS -const processCss = [ - autoprefixer(), // adds vendor prefixes - pixrem(), // add fallbacks for rem units - postcssFlexbugFixes(), // adds flexbox fixes -] -const printProcessCss = [ - pixrem(), // add fallbacks for rem units -] -const minifyCss = [ - cssnano({ preset: 'default' }) // minify result -] - -// JS - -const js_files_skip_optimisation = [ - // Optimise all files - '**', - // But skip the following files - // For example: '!static/js/vendor/**/*.js' -]; - -//////////////////////////////// -// Tasks -//////////////////////////////// - -// Styles autoprefixing and minification -function css() { - return src(`${paths.css_source}/**/*.css`) - .pipe(errorHandler(catchError)) - .pipe(sourcemaps.init()) - .pipe(postcss(processCss)) - .pipe(sourcemaps.write()) - .pipe(gulpif(PRODUCTION, postcss(minifyCss))) // Minifies the result - .pipe(dest(paths.css_output)) -} - -function scss() { - function postcss_callback(file) { - if (file.basename.endsWith('.print.css')) { - return { plugins: printProcessCss } - } else { - return { plugins: processCss } - } - } - return src(`${paths.scss_source}/**/*.scss`, { since: lastRun(scss) }) - .pipe(errorHandler(catchError)) - .pipe(dependents()) - .pipe(sourcemaps.init()) - .pipe(sass({ - includePaths: [ - paths.bootstrap_source, - paths.scss_source - ], - sourceComments: !PRODUCTION, - }).on('error', sass.logError)) - .pipe(postcss(postcss_callback)) - .pipe(sourcemaps.write()) - .pipe(gulpif(PRODUCTION, postcss(minifyCss))) // Minifies the result - .pipe(dest(paths.css_output)) -} - -// Javascript -function js() { - const js_filter = filter(js_files_skip_optimisation, { restore: true }) - return src([ - `${paths.js_source}/**/*.js`, - `!${paths.js_source}/modules/**/*.js` - ], { since: lastRun(js) }) - .pipe(errorHandler(catchError)) - .pipe(sourcemaps.init()) - .pipe(js_filter) - .pipe(tap(function (file) { - file.contents = browserify(file.path, { debug: true }).bundle().on('error', catchError); - })) - .pipe(buffer()) - .pipe(gulpif(PRODUCTION, terser({ keep_fnames: true }))) - .pipe(js_filter.restore) - .pipe(sourcemaps.write()) - .pipe(dest(paths.js_output)) -} - -// Vendor Javascript (always minified) -function vendorJs() { - return src(paths.vendor_js_source) - .pipe(errorHandler(catchError)) - .pipe(concat('vendors.js')) - .pipe(terser()) - .pipe(dest(paths.js_output)) -} - -// Image compression -function img() { - return src(`${paths.images_source}/**/*`) - .pipe(gulpif(PRODUCTION, imagemin())) // Compresses PNG, JPEG, GIF and SVG images - .pipe(dest(paths.images_output)) -} - -// Downloadable files -function files() { - return src(`${paths.files_source}/**/*`) - .pipe(dest(paths.files_output)) -} - -// Custom fonts files -function fonts() { - return src(`${paths.fonts_source}/**/*`) - .pipe(dest(paths.fonts_output)) -} - -// Browser sync server for live reload -// TODO: Not yet working -// function initBrowserSync() { -// browserSync.init({ -// // https://www.browsersync.io/docs/options/#option-proxy -// proxy: { -// target: 'cs-unplugged.localhost:8000', -// proxyReq: [ -// function (proxyReq, req) { -// // Assign proxy "host" header same as current request at Browsersync server -// proxyReq.setHeader('Host', req.headers.host) -// } -// ] -// }, -// // https://www.browsersync.io/docs/options/#option-open -// // Disable as it doesn't work from inside a container -// open: false -// } -// ) -// } - -// Watch -function watchPaths() { - watch([`${paths.js_source}/**/*.js`], js).on("change", reload) - watch([`${paths.css_source}/**/*.css`], css).on("change", reload) - watch([`${paths.scss_source}/**/*.scss`], scss).on("change", reload) - watch([`${paths.images_source}/**/*`], img).on("change", reload) -} - -// Generate all assets -const generateAssets = parallel( - css, - scss, - js, - vendorJs, - img, - files, - fonts -) - -// Set up dev environment -const dev = parallel( - // initBrowserSync, - watchPaths -) -// TODO: Look at cleaning build folder -exports["generate-assets"] = generateAssets -exports["dev"] = dev -exports.default = series(generateAssets, dev) From bee03b2d6a5b456171cab5d840f155fbf498cdf1 Mon Sep 17 00:00:00 2001 From: jhn27 Date: Thu, 21 Dec 2023 15:39:04 +1300 Subject: [PATCH 4/5] switch to es module --- csunplugged/gulpfile.mjs | 246 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 csunplugged/gulpfile.mjs diff --git a/csunplugged/gulpfile.mjs b/csunplugged/gulpfile.mjs new file mode 100644 index 000000000..150852ed4 --- /dev/null +++ b/csunplugged/gulpfile.mjs @@ -0,0 +1,246 @@ +//////////////////////////////// +// Setup +//////////////////////////////// + +// Gulp and package +import { src, dest, parallel, series, watch, lastRun } from 'gulp' +import { name } from './package.json' + +// Plugins +import autoprefixer from 'autoprefixer' +import browserify from 'browserify' +const browserSync = require('browser-sync').create() +import buffer from 'vinyl-buffer' +import { bgRed, red } from 'ansi-colors' +import concat from 'gulp-concat' +import cssnano from 'cssnano' +import dependents from 'gulp-dependents' +import errorHandler from 'gulp-error-handle' +import filter from 'gulp-filter' +import gulpif from 'gulp-if' +import { hideBin } from 'yargs/helpers' +import imagemin from 'gulp-imagemin' +import { error as _error } from 'fancy-log' +import pixrem from 'pixrem' +import postcss from 'gulp-postcss' +import postcssFlexbugFixes from 'postcss-flexbugs-fixes' +const reload = browserSync.reload +const sass = require('gulp-sass')(require('sass')); +import { init, write } from 'gulp-sourcemaps' +import { spawn } from 'child_process' +import tap from 'gulp-tap' +import terser from 'gulp-terser' +import yargs from 'yargs/yargs' + +// Arguments +const argv = yargs(hideBin(process.argv)).argv +const PRODUCTION = !!argv.production; + +// Relative paths function +function pathsConfig(appName) { + this.app = `./${name}` + const vendorsRoot = 'node_modules' + const staticSourceRoot = 'static' + const staticOutputRoot = 'build' + + return { + app: this.app, + // Source files + bootstrap_source: `${vendorsRoot}/bootstrap/scss`, + css_source: `${staticSourceRoot}/css`, + scss_source: `${staticSourceRoot}/scss`, + js_source: `${staticSourceRoot}/js`, + images_source: `${staticSourceRoot}/img`, + files_source: `${staticSourceRoot}/files`, + fonts_source: `${staticSourceRoot}/fonts`, + vendor_js_source: [ + `${vendorsRoot}/jquery/dist/jquery.js`, + `${vendorsRoot}/popper.js/dist/umd/popper.js`, + `${vendorsRoot}/bootstrap/dist/js/bootstrap.js`, + `${vendorsRoot}/details-element-polyfill/dist/details-element-polyfill.js`, + `${vendorsRoot}/scratchblocks/build/scratchblocks.min.js`, + `${vendorsRoot}/multiple-select/dist/multiple-select-es.js`, + ], + // Output files + css_output: `${staticOutputRoot}/css`, + images_output: `${staticOutputRoot}/img`, + js_output: `${staticOutputRoot}/js`, + files_output: `${staticOutputRoot}/files`, + fonts_output: `${staticOutputRoot}/fonts`, + } +} + +var paths = pathsConfig() + +function catchError(error) { + _error( + bgRed('Error:'), + red(error) + ); + this.emit('end'); +} + +//////////////////////////////// +// Config +//////////////////////////////// + +// CSS/SCSS +const processCss = [ + autoprefixer(), // adds vendor prefixes + pixrem(), // add fallbacks for rem units + postcssFlexbugFixes(), // adds flexbox fixes +] +const printProcessCss = [ + pixrem(), // add fallbacks for rem units +] +const minifyCss = [ + cssnano({ preset: 'default' }) // minify result +] + +// JS + +const js_files_skip_optimisation = [ + // Optimise all files + '**', + // But skip the following files + // For example: '!static/js/vendor/**/*.js' +]; + +//////////////////////////////// +// Tasks +//////////////////////////////// + +// Styles autoprefixing and minification +function css() { + return src(`${paths.css_source}/**/*.css`) + .pipe(errorHandler(catchError)) + .pipe(init()) + .pipe(postcss(processCss)) + .pipe(write()) + .pipe(gulpif(PRODUCTION, postcss(minifyCss))) // Minifies the result + .pipe(dest(paths.css_output)) +} + +function scss() { + function postcss_callback(file) { + if (file.basename.endsWith('.print.css')) { + return { plugins: printProcessCss } + } else { + return { plugins: processCss } + } + } + return src(`${paths.scss_source}/**/*.scss`, { since: lastRun(scss) }) + .pipe(errorHandler(catchError)) + .pipe(dependents()) + .pipe(init()) + .pipe(sass({ + includePaths: [ + paths.bootstrap_source, + paths.scss_source + ], + sourceComments: !PRODUCTION, + }).on('error', sass.logError)) + .pipe(postcss(postcss_callback)) + .pipe(write()) + .pipe(gulpif(PRODUCTION, postcss(minifyCss))) // Minifies the result + .pipe(dest(paths.css_output)) +} + +// Javascript +function js() { + const js_filter = filter(js_files_skip_optimisation, { restore: true }) + return src([ + `${paths.js_source}/**/*.js`, + `!${paths.js_source}/modules/**/*.js` + ], { since: lastRun(js) }) + .pipe(errorHandler(catchError)) + .pipe(init()) + .pipe(js_filter) + .pipe(tap(function (file) { + file.contents = browserify(file.path, { debug: true }).bundle().on('error', catchError); + })) + .pipe(buffer()) + .pipe(gulpif(PRODUCTION, terser({ keep_fnames: true }))) + .pipe(js_filter.restore) + .pipe(write()) + .pipe(dest(paths.js_output)) +} + +// Vendor Javascript (always minified) +function vendorJs() { + return src(paths.vendor_js_source) + .pipe(errorHandler(catchError)) + .pipe(concat('vendors.js')) + .pipe(terser()) + .pipe(dest(paths.js_output)) +} + +// Image compression +function img() { + return src(`${paths.images_source}/**/*`) + .pipe(gulpif(PRODUCTION, imagemin())) // Compresses PNG, JPEG, GIF and SVG images + .pipe(dest(paths.images_output)) +} + +// Downloadable files +function files() { + return src(`${paths.files_source}/**/*`) + .pipe(dest(paths.files_output)) +} + +// Custom fonts files +function fonts() { + return src(`${paths.fonts_source}/**/*`) + .pipe(dest(paths.fonts_output)) +} + +// Browser sync server for live reload +// TODO: Not yet working +// function initBrowserSync() { +// browserSync.init({ +// // https://www.browsersync.io/docs/options/#option-proxy +// proxy: { +// target: 'cs-unplugged.localhost:8000', +// proxyReq: [ +// function (proxyReq, req) { +// // Assign proxy "host" header same as current request at Browsersync server +// proxyReq.setHeader('Host', req.headers.host) +// } +// ] +// }, +// // https://www.browsersync.io/docs/options/#option-open +// // Disable as it doesn't work from inside a container +// open: false +// } +// ) +// } + +// Watch +function watchPaths() { + watch([`${paths.js_source}/**/*.js`], js).on("change", reload) + watch([`${paths.css_source}/**/*.css`], css).on("change", reload) + watch([`${paths.scss_source}/**/*.scss`], scss).on("change", reload) + watch([`${paths.images_source}/**/*`], img).on("change", reload) +} + +// Generate all assets +const generateAssets = parallel( + css, + scss, + js, + vendorJs, + img, + files, + fonts +) + +// Set up dev environment +const dev = parallel( + // initBrowserSync, + watchPaths +) +// TODO: Look at cleaning build folder +exports["generate-assets"] = generateAssets +exports["dev"] = dev +const _default = series(generateAssets, dev) +export { _default as default } From f56ca57d65d54509028c1b124071f02d7eefc6b0 Mon Sep 17 00:00:00 2001 From: jhn27 Date: Thu, 21 Dec 2023 16:33:03 +1300 Subject: [PATCH 5/5] move over to esmodule for gulpfile --- csunplugged/gulpfile.mjs | 33 +++++++++++++++++++-------------- docker-compose.local.yml | 2 +- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/csunplugged/gulpfile.mjs b/csunplugged/gulpfile.mjs index 150852ed4..af8bc734e 100644 --- a/csunplugged/gulpfile.mjs +++ b/csunplugged/gulpfile.mjs @@ -3,15 +3,20 @@ //////////////////////////////// // Gulp and package -import { src, dest, parallel, series, watch, lastRun } from 'gulp' -import { name } from './package.json' +import gulp from "gulp"; +const { src, dest, parallel, series, watch, lastRun } = gulp; + +// Package +import { readFile } from "node:fs/promises"; +const pjson = JSON.parse(await readFile('./package.json')) // Plugins import autoprefixer from 'autoprefixer' import browserify from 'browserify' -const browserSync = require('browser-sync').create() +import browserSync from 'browser-sync' import buffer from 'vinyl-buffer' -import { bgRed, red } from 'ansi-colors' +import c from 'ansi-colors' +const { bgRed, red } = c; import concat from 'gulp-concat' import cssnano from 'cssnano' import dependents from 'gulp-dependents' @@ -24,9 +29,12 @@ import { error as _error } from 'fancy-log' import pixrem from 'pixrem' import postcss from 'gulp-postcss' import postcssFlexbugFixes from 'postcss-flexbugs-fixes' -const reload = browserSync.reload -const sass = require('gulp-sass')(require('sass')); -import { init, write } from 'gulp-sourcemaps' +const { reload } = browserSync.create(); +import * as dartSass from 'sass'; +import gulpSass from 'gulp-sass'; +const sass = gulpSass(dartSass); +import sourcemaps from 'gulp-sourcemaps' +const { init, write } = sourcemaps import { spawn } from 'child_process' import tap from 'gulp-tap' import terser from 'gulp-terser' @@ -38,13 +46,12 @@ const PRODUCTION = !!argv.production; // Relative paths function function pathsConfig(appName) { - this.app = `./${name}` const vendorsRoot = 'node_modules' const staticSourceRoot = 'static' const staticOutputRoot = 'build' return { - app: this.app, + app: `./${pjson.name}`, // Source files bootstrap_source: `${vendorsRoot}/bootstrap/scss`, css_source: `${staticSourceRoot}/css`, @@ -224,7 +231,7 @@ function watchPaths() { } // Generate all assets -const generateAssets = parallel( +export const generateAssets = parallel( css, scss, js, @@ -233,6 +240,7 @@ const generateAssets = parallel( files, fonts ) +generateAssets.displayName = "generate-assets"; // Set up dev environment const dev = parallel( @@ -240,7 +248,4 @@ const dev = parallel( watchPaths ) // TODO: Look at cleaning build folder -exports["generate-assets"] = generateAssets -exports["dev"] = dev -const _default = series(generateAssets, dev) -export { _default as default } +export default series(generateAssets, dev); diff --git a/docker-compose.local.yml b/docker-compose.local.yml index 2737832a5..8967a83c9 100644 --- a/docker-compose.local.yml +++ b/docker-compose.local.yml @@ -37,7 +37,7 @@ services: volumes: # https://burnedikt.com/dockerized-node-development-and-mounting-node-volumes/#exclude-node_modules-from-the-mount - ./csunplugged/package.json:/app/package.json:z - - ./csunplugged/gulpfile.js:/app/gulpfile.js:z + - ./csunplugged/gulpfile.mjs:/app/gulpfile.mjs:z - ./csunplugged/static:/app/static:z - ./csunplugged/build:/app/build:z command: npm run dev