feat: swap JavaScript minifier from UglifyJS to terser

ministryofjustice · Feb 21, 2025 · e9aebf7 · e9aebf7
1 parent fc94b1b
commit e9aebf7
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 182 deletions.
diff --git a/gulp/build-javascript.js b/gulp/build-javascript.js
@@ -1,14 +1,13 @@
-const { join } = require('path')
+const { mkdir, readFile, writeFile } = require('fs/promises')
+const { dirname, join } = require('path')
 
 const commonjs = require('@rollup/plugin-commonjs')
 const nodeResolve = require('@rollup/plugin-node-resolve')
 const { glob } = require('glob')
 const gulp = require('gulp')
-const concat = require('gulp-concat')
-const rename = require('gulp-rename')
-const uglify = require('gulp-uglify')
 const { rollup } = require('rollup')
 const externalGlobals = require('rollup-plugin-external-globals')
+const { minify } = require('terser')
 
 gulp.task('build:javascript', async () => {
   const modulePaths = await glob('moj/components/**/*.{cjs,js,mjs}', {
@@ -61,25 +60,44 @@ gulp.task('build:javascript', async () => {
     for (const output of options.output) {
       await bundle.write(output)
     }
+
+    // Write to output format with jQuery bundled
+    if (options.input.endsWith('all.mjs')) {
+      await bundle.write({
+        banner: await readFile('node_modules/jquery/dist/jquery.js', 'utf8'),
+        extend: true,
+        file: 'package/moj/all.jquery.js',
+        format: 'umd',
+        name: 'MOJFrontend'
+      })
+    }
   }
 })
 
-gulp.task('build:javascript-minified', () => {
-  return gulp
-    .src('package/moj/all.js')
-    .pipe(uglify())
-    .pipe(rename('moj-frontend.min.js'))
-    .pipe(gulp.dest('package/moj'))
-})
+gulp.task('build:javascript-minified', async () => {
+  for (const { srcPath, destPath } of [
+    {
+      srcPath: 'package/moj/all.js',
+      destPath: 'package/moj/moj-frontend.min.js'
+    },
+    {
+      srcPath: 'package/moj/all.jquery.js',
+      destPath: 'package/moj/all.jquery.min.js'
+    }
+  ]) {
+    const output = await minify(
+      { [srcPath]: await readFile(srcPath, 'utf8') },
+      {
+        format: { comments: false },
+        safari10: true
+      }
+    )
 
-gulp.task('build:javascript-minified-with-jquery', () => {
-  return gulp
-    .src(['node_modules/jquery/dist/jquery.js', 'package/moj/all.js'])
-    .pipe(concat('all.jquery.min.js'))
-    .pipe(uglify())
-    .pipe(gulp.dest('package/moj/'))
+    await mkdir(dirname(destPath), { recursive: true })
+    await writeFile(destPath, output.code)
+  }
 })
 
 /**
- * @import { RollupOptions } from 'rollup'
+ * @import { ModuleFormat, OutputOptions, RollupOptions } from 'rollup'
  */
diff --git a/gulp/dist.js b/gulp/dist.js
@@ -1,11 +1,14 @@
+const { mkdir, readFile, writeFile } = require('fs/promises')
+const { dirname } = require('path')
+
 const autoprefixer = require('autoprefixer')
 const cssnano = require('cssnano')
 const gulp = require('gulp')
 const postcss = require('gulp-postcss')
 const rename = require('gulp-rename')
 const gulpSass = require('gulp-sass')
-const uglify = require('gulp-uglify')
 const dartSass = require('sass-embedded')
+const { minify } = require('terser')
 
 const sass = gulpSass(dartSass)
 
@@ -21,12 +24,24 @@ gulp.task('dist:assets', () => {
     .pipe(gulp.dest('dist/assets/'))
 })
 
-gulp.task('dist:javascript', () => {
-  return gulp
-    .src('package/moj/all.js')
-    .pipe(uglify())
-    .pipe(rename('moj-frontend.min.js'))
-    .pipe(gulp.dest('dist'))
+gulp.task('dist:javascript', async () => {
+  for (const { srcPath, destPath } of [
+    {
+      srcPath: 'package/moj/all.js',
+      destPath: 'dist/moj-frontend.min.js'
+    }
+  ]) {
+    const output = await minify(
+      { [srcPath]: await readFile(srcPath, 'utf8') },
+      {
+        format: { comments: false },
+        safari10: true
+      }
+    )
+
+    await mkdir(dirname(destPath), { recursive: true })
+    await writeFile(destPath, output.code)
+  }
 })
 
 gulp.task('dist:css', (done) => {

diff --git a/gulp/docs.js b/gulp/docs.js
@@ -1,11 +1,8 @@
-const { dirname } = require('path')
-
 const commonjs = require('@rollup/plugin-commonjs')
 const nodeResolve = require('@rollup/plugin-node-resolve')
+const terser = require('@rollup/plugin-terser')
 const gulp = require('gulp')
-const rename = require('gulp-rename')
 const gulpSass = require('gulp-sass')
-const uglify = require('gulp-uglify')
 const { rollup } = require('rollup')
 const externalGlobals = require('rollup-plugin-external-globals')
 const dartSass = require('sass-embedded')
@@ -67,11 +64,12 @@ gulp.task('docs:styles', (done) => {
 
 // Bundle the docs site javascript
 gulp.task('docs:scripts', async () => {
-  const input = 'docs/assets/javascript/application.mjs'
-  const output = 'public/assets/javascript/application.js'
-
-  const bundle = await rollup({
-    input,
+  const options = /** @satisfies {RollupOptions} */ ({
+    input: 'docs/assets/javascript/application.mjs',
+    output: {
+      file: 'public/assets/javascript/application.js',
+      format: 'esm'
+    },
     external: ['jquery'],
     plugins: [
       externalGlobals({
@@ -82,18 +80,21 @@ gulp.task('docs:scripts', async () => {
     ]
   })
 
-  await bundle.write({
-    file: output,
-    format: 'esm'
-  })
+  // Create bundle
+  const bundle = await rollup(options)
 
+  // Add minifier plugin (optional)
   if (process.env.ENV !== 'dev') {
-    return gulp
-      .src(output)
-      .pipe(uglify())
-      .pipe(rename({ extname: '.js' }))
-      .pipe(gulp.dest(dirname(output)))
+    options.output.plugins = [
+      terser({
+        format: { comments: false },
+        safari10: true
+      })
+    ]
   }
+
+  // Write to output format
+  await bundle.write(options.output)
 })
 
 gulp.task('docs:revision', async () => {

diff --git a/gulpfile.js b/gulpfile.js
@@ -11,7 +11,6 @@ gulp.task(
     'build:copy-files',
     'build:javascript',
     'build:javascript-minified',
-    'build:javascript-minified-with-jquery',
     'build:css',
     'build:compress-images'
   )