diff --git a/csunplugged/gulpfile.js b/csunplugged/gulpfile.mjs similarity index 79% rename from csunplugged/gulpfile.js rename to csunplugged/gulpfile.mjs index b97941896..af8bc734e 100644 --- a/csunplugged/gulpfile.js +++ b/csunplugged/gulpfile.mjs @@ -3,34 +3,42 @@ //////////////////////////////// // Gulp and package -const { src, dest, parallel, series, watch, lastRun } = require('gulp') -const pjson = require('./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 -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') +import autoprefixer from 'autoprefixer' +import browserify from 'browserify' +import browserSync from 'browser-sync' +import buffer from 'vinyl-buffer' +import c from 'ansi-colors' +const { bgRed, red } = c; +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.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' +import yargs from 'yargs/yargs' // Arguments const argv = yargs(hideBin(process.argv)).argv @@ -38,13 +46,12 @@ 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, + app: `./${pjson.name}`, // Source files bootstrap_source: `${vendorsRoot}/bootstrap/scss`, css_source: `${staticSourceRoot}/css`, @@ -73,9 +80,9 @@ function pathsConfig(appName) { var paths = pathsConfig() function catchError(error) { - log.error( - c.bgRed('Error:'), - c.red(error) + _error( + bgRed('Error:'), + red(error) ); this.emit('end'); } @@ -114,9 +121,9 @@ const js_files_skip_optimisation = [ function css() { return src(`${paths.css_source}/**/*.css`) .pipe(errorHandler(catchError)) - .pipe(sourcemaps.init()) + .pipe(init()) .pipe(postcss(processCss)) - .pipe(sourcemaps.write()) + .pipe(write()) .pipe(gulpif(PRODUCTION, postcss(minifyCss))) // Minifies the result .pipe(dest(paths.css_output)) } @@ -132,7 +139,7 @@ function scss() { return src(`${paths.scss_source}/**/*.scss`, { since: lastRun(scss) }) .pipe(errorHandler(catchError)) .pipe(dependents()) - .pipe(sourcemaps.init()) + .pipe(init()) .pipe(sass({ includePaths: [ paths.bootstrap_source, @@ -141,7 +148,7 @@ function scss() { sourceComments: !PRODUCTION, }).on('error', sass.logError)) .pipe(postcss(postcss_callback)) - .pipe(sourcemaps.write()) + .pipe(write()) .pipe(gulpif(PRODUCTION, postcss(minifyCss))) // Minifies the result .pipe(dest(paths.css_output)) } @@ -154,7 +161,7 @@ function js() { `!${paths.js_source}/modules/**/*.js` ], { since: lastRun(js) }) .pipe(errorHandler(catchError)) - .pipe(sourcemaps.init()) + .pipe(init()) .pipe(js_filter) .pipe(tap(function (file) { file.contents = browserify(file.path, { debug: true }).bundle().on('error', catchError); @@ -162,7 +169,7 @@ function js() { .pipe(buffer()) .pipe(gulpif(PRODUCTION, terser({ keep_fnames: true }))) .pipe(js_filter.restore) - .pipe(sourcemaps.write()) + .pipe(write()) .pipe(dest(paths.js_output)) } @@ -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,6 +248,4 @@ const dev = parallel( watchPaths ) // TODO: Look at cleaning build folder -exports["generate-assets"] = generateAssets -exports["dev"] = dev -exports.default = series(generateAssets, dev) +export default series(generateAssets, dev); 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", 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 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