Updated rollup

gulpfile.js

@@ -1,16 +1,10 @@
-// GULPFILE
+const { src, dest, series } = require('gulp');
-// - - - - - - - - - - - - - - -
+const rollup = require('@rollup/stream');
-// This file processes all of the assets in the "src" folder
+const rollupPluginCommonjs = require('@rollup/plugin-commonjs');
-// and outputs the finished files in the "dist" folder.
+const rollupPluginNodeResolve = require('@rollup/plugin-node-resolve');
-
+const source = require('vinyl-source-stream');
-// 1. LIBRARIES
+const buffer = require('vinyl-buffer');
-// - - - - - - - - - - - - - - -
-const { src, dest, series, parallel, watch } = require('gulp');
-const rollupPluginCommonjs = require('rollup-plugin-commonjs');
-const rollupPluginNodeResolve = require('rollup-plugin-node-resolve');
 const gulpMerge = require('gulp-merge');
-const stylish = require('jshint-stylish');
-const uswds = require("@uswds/compile");
 
 const plugins = {};
 plugins.addSrc = require('gulp-add-src');
@@ -19,11 +13,8 @@ plugins.cleanCSS = require('gulp-clean-css');
 plugins.concat = require('gulp-concat');
 plugins.jshint = require('gulp-jshint');
 plugins.prettyerror = require('gulp-prettyerror');
-plugins.rollup = require('gulp-better-rollup');
 plugins.uglify = require('gulp-uglify');
 
-// 2. CONFIGURATION
-// - - - - - - - - - - - - - - -
 const paths = {
   src: 'app/assets/',
   dist: 'app/static/',
@@ -31,60 +22,25 @@ const paths = {
   toolkit: 'node_modules/govuk_frontend_toolkit/',
   govuk_frontend: 'node_modules/govuk-frontend/'
 };
-// Rewrite /static prefix for URLs in CSS files
-let staticPathMatcher = new RegExp('^\/static\/')
-if (process.env.NOTIFY_ENVIRONMENT == 'development') { // pass through if on development
-  staticPathMatcher = url => url;
-}
-
-// 3. TASKS
-// - - - - - - - - - - - - - - -
-
-// Move GOV.UK template resources
-
-const copy = {
-  error_pages: () => {
-    return src(paths.src + 'error_pages/**/*')
-      .pipe(dest(paths.dist + 'error_pages/'))
-  },
-  fonts: () => {
-    return src(paths.src + 'fonts/**/*')
-      .pipe(dest(paths.dist + 'fonts/'));
-  },
-  gtm: () => {
-    return src(paths.src + 'js/gtm_head.js')
-      .pipe(dest(paths.dist + 'js/'));
-  }
-};
 
 const javascripts = () => {
-  // JS from third-party sources
+  const vendored = rollup({
-  // We assume none of it will need to pass through Babel
+    input: paths.src + 'javascripts/modules/all.mjs',
-  const vendored = src(paths.src + 'javascripts/modules/all.mjs')
+    plugins: [
-    // Use Rollup to combine all JS in JS module format into a Immediately Invoked Function
+      rollupPluginNodeResolve({
-    // Expression (IIFE) to:
+        mainFields: ['module', 'main']
-    // - deliver it in one bundle
+      }),
-    // - allow it to run in browsers without support for JS Modules
+      rollupPluginCommonjs({
-    .pipe(plugins.rollup(
+        include: 'node_modules/**'
-      {
+      })
-        plugins: [
+    ],
-          // determine module entry points from either 'module' or 'main' fields in package.json
+    output: {
-          rollupPluginNodeResolve({
+      format: 'iife',
-            mainFields: ['module', 'main']
+      name: 'GOVUK'
-          }),
+    }
-          // gulp rollup runs on nodeJS so reads modules in commonJS format
+  })
-          // this adds node_modules to the require path so it can find the GOVUK Frontend modules
+    .pipe(source('all.mjs'))
-          rollupPluginCommonjs({
+    .pipe(buffer())
-            include: 'node_modules/**'
-          })
-        ]
-      },
-      {
-        format: 'iife',
-        name: 'GOVUK'
-      }
-    ))
-    // return a stream which pipes these files before the JS modules bundle
     .pipe(plugins.addSrc.prepend([
       paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
       paths.npm + 'jquery/dist/jquery.min.js',
@@ -96,7 +52,6 @@ const javascripts = () => {
       paths.npm + 'chart.js/dist/chart.umd.js'
     ]));
 
-  // JS local to this application
   const local = src([
     paths.toolkit + 'javascripts/govuk/modules.js',
     paths.toolkit + 'javascripts/govuk/show-hide-content.js',
@@ -129,113 +84,10 @@ const javascripts = () => {
       presets: ['@babel/preset-env']
     }));
 
-  // return single stream of all vinyl objects piped from the end of the vendored stream, then
-  // those from the end of the local stream
   return gulpMerge(vendored, local)
     .pipe(plugins.uglify())
     .pipe(plugins.concat('all.js'))
-    .pipe(dest(paths.dist + 'javascripts/'))
+    .pipe(dest(paths.dist + 'javascripts/'));
 };
 
-// Copy images
+exports.default = series(javascripts);
-
-const images = () => {
-  return src([
-    paths.toolkit + 'images/**/*',
-    paths.govuk_frontend + 'assets/images/**/*',
-    paths.src + 'images/**/*',
-    paths.src + 'img/**/*',
-  ], {encoding: false})
-    .pipe(dest(paths.dist + 'images/'))
-};
-
-const watchFiles = {
-  javascripts: (cb) => {
-    watch([paths.src + 'javascripts/**/*'], javascripts);
-    cb();
-  },
-  images: (cb) => {
-    watch([paths.src + 'images/**/*'], images);
-    cb();
-  },
-  uswds: (cb) => {
-    watch([paths.src + 'sass/**/*'], uswds.watch);
-    cb();
-  },
-  self: (cb) => {
-    watch(['gulpfile.js'], defaultTask);
-    cb();
-  }
-};
-
-const lint = {
-  'js': (cb) => {
-    return src(
-      paths.src + 'javascripts/**/*.js'
-    )
-      .pipe(plugins.jshint())
-      .pipe(plugins.jshint.reporter(stylish))
-      .pipe(plugins.jshint.reporter('fail'))
-  }
-};
-
-// Default: compile everything
-const defaultTask = parallel(
-  parallel(
-    copy.fonts,
-    images
-  ),
-  series(
-    copy.error_pages,
-    series(
-      javascripts
-    ),
-    uswds.compile,
-    uswds.copyAssets,
-    copy.gtm
-  )
-);
-
-// Watch for changes and re-run tasks
-const watchForChanges = parallel(
-  watchFiles.javascripts,
-  watchFiles.images,
-  watchFiles.self
-);
-
-exports.default = defaultTask;
-
-exports.lint = series(lint.js);
-
-// Optional: recompile on changes
-exports.watch = series(defaultTask, watchForChanges);
-
-
-// 3. Compile USWDS
-
-/**
-* USWDS version
-* Set the major version of USWDS you're using
-* (Current options are the numbers 2 or 3)
-*/
-uswds.settings.version = 3;
-
-/**
-* Path settings
-* Set as many as you need
-*/
-uswds.paths.dist.css = './app/static/css';
-uswds.paths.dist.js = './app/static/js';
-uswds.paths.dist.img = './app/static/img';
-uswds.paths.dist.fonts = './app/static/fonts';
-uswds.paths.dist.theme = './app/assets/sass/uswds';
-
-/**
-* Exports
-* Add as many as you need
-*/
-exports.init = uswds.init;
-exports.compile = uswds.compile;
-exports.copyAll = uswds.copyAll;
-exports.copyAssets = uswds.copyAssets;
-exports.watch = uswds.watch;

package.json

@@ -25,6 +25,9 @@
     "graceful-fs": "^4.2.11"
   },
   "dependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/stream": "^3.0.1",
     "@uswds/uswds": "^3.8.1",
     "cbor-js": "0.1.0",
     "chart.js": "^4.4.3",
@@ -39,17 +42,18 @@
     "sass-embedded": "^1.77.8",
     "socket.io-client": "^4.2.0",
     "textarea-caret": "3.1.0",
-    "timeago": "1.6.7"
+    "timeago": "1.6.7",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@uswds/compile": "^1.1.0",
     "better-npm-audit": "^3.7.3",
     "gulp": "^5.0.0",
     "gulp-add-src": "^1.0.0",
     "gulp-babel": "8.0.0",
-    "gulp-better-rollup": "4.0.1",
     "gulp-clean-css": "4.3.0",
     "gulp-concat": "^2.6.1",
     "gulp-include": "2.4.1",
@@ -61,7 +65,7 @@
     "jest-environment-jsdom": "^29.2.2",
     "jshint": "2.13.6",
     "jshint-stylish": "2.2.1",
-    "rollup": "1.32.1",
+    "rollup": "^4.20.0",
     "rollup-plugin-commonjs": "10.1.0",
     "rollup-plugin-node-resolve": "5.2.0"
   }