Migrate gulp tasks to ES modules

Author: colinrotherham

gulpfile.js renamed to gulpfile.mjs

@@ -1,23 +1,23 @@
-const browserSync = require('browser-sync')
-const gulp = require('gulp')
+import browserSync from 'browser-sync'
+import gulp from 'gulp'
 
-const {
+import {
   buildHTML,
   validateHTML,
   copyCSS,
   copyJS,
   copyBinaryAssets,
   serve
-} = require('./shared/tasks/app')
-const { clean } = require('./shared/tasks/clean')
-const {
+} from './shared/tasks/app.mjs'
+import { clean } from './shared/tasks/clean.mjs'
+import {
   assets,
   cssFolder,
   jsFolder,
   createZip
-} = require('./shared/tasks/release')
-const { webpackJS, minifyJS } = require('./shared/tasks/scripts')
-const { compileCSS, minifyCSS } = require('./shared/tasks/styles')
+} from './shared/tasks/release.mjs'
+import { webpackJS, minifyJS } from './shared/tasks/scripts.mjs'
+import { compileCSS, minifyCSS } from './shared/tasks/styles.mjs'
 
 /**
  * Development tasks

shared/tasks/app.js renamed to shared/tasks/app.mjs

@@ -1,22 +1,22 @@
-const { PORT = 3000 } = process.env
+import { mkdir, writeFile } from 'fs/promises'
+import { join, parse } from 'path'
 
-const { mkdir, writeFile } = require('fs/promises')
-const { join, parse } = require('path')
+import browserSync from 'browser-sync'
+import { glob } from 'glob'
+import gulp from 'gulp'
+import { HtmlValidate, formatterFactory } from 'html-validate'
+import nunjucks from 'nunjucks'
+import PluginError from 'plugin-error'
 
-const browserSync = require('browser-sync')
-const { glob } = require('glob')
-const gulp = require('gulp')
-const { HtmlValidate, formatterFactory } = require('html-validate')
-const nunjucks = require('nunjucks')
-const PluginError = require('plugin-error')
+import validatorConfig from '../../.htmlvalidate.js'
+import pkg from '../../package.json' with { type: 'json' }
 
-const validatorConfig = require('../../.htmlvalidate')
-const { version } = require('../../package.json')
+const { PORT = 3000 } = process.env
 
 /**
  * Compile Nunjucks into HTML
  */
-async function buildHTML() {
+export async function buildHTML() {
   const paths = await glob('**/*.njk', {
     cwd: 'app',
     nodir: true
@@ -33,7 +33,7 @@ async function buildHTML() {
 
     const html = env.render(path, {
       baseUrl: '/nhsuk-frontend/',
-      version
+      version: pkg.version
     })
 
     const destPath = join('dist/app', dir)
@@ -48,7 +48,7 @@ async function buildHTML() {
 /**
  * Validate Nunjucks HTML output
  */
-async function validateHTML() {
+export async function validateHTML() {
   const paths = await glob('dist/app/**/*.html', {
     nodir: true
   })
@@ -73,7 +73,7 @@ async function validateHTML() {
 /**
  * Copy CSS from dist into the documentation directory
  */
-async function copyCSS() {
+export async function copyCSS() {
   await mkdir('dist/app/stylesheets', {
     recursive: true
   })
@@ -87,7 +87,7 @@ async function copyCSS() {
 /**
  * Copy JS from dist into the documentation directory
  */
-async function copyJS() {
+export async function copyJS() {
   await mkdir('dist/app/javascripts', {
     recursive: true
   })
@@ -101,7 +101,7 @@ async function copyJS() {
 /**
  * Copy logos, icons and other binary assets
  */
-async function copyBinaryAssets() {
+export async function copyBinaryAssets() {
   await mkdir('dist/app/assets', {
     recursive: true
   })
@@ -115,7 +115,7 @@ async function copyBinaryAssets() {
 /**
  * Serve the static docs directory over localhost
  */
-function serve() {
+export function serve() {
   return browserSync({
     ghostMode: false,
     host: '0.0.0.0',
@@ -154,15 +154,6 @@ function serve() {
   })
 }
 
-module.exports = {
-  buildHTML,
-  validateHTML,
-  copyCSS,
-  copyJS,
-  copyBinaryAssets,
-  serve
-}
-
 /**
  * @import { Result } from 'html-validate'
  */

shared/tasks/clean.js renamed to shared/tasks/clean.mjs

@@ -3,11 +3,7 @@
  * @param {string[]} pattern - glob patterns or paths to clean
  * @param {string[]} [ignore] - glob patterns or paths to ignore
  */
-async function clean(pattern, ignore) {
+export async function clean(pattern, ignore) {
   const { deleteAsync } = await import('del')
   await deleteAsync(pattern, { ignore })
 }
-
-module.exports = {
-  clean
-}

shared/tasks/release.js renamed to shared/tasks/release.mjs

@@ -1,6 +1,6 @@
-const gulp = require('gulp')
+import gulp from 'gulp'
 
-const { version } = require('../../package.json')
+import pkg from '../../package.json' with { type: 'json' }
 
 /**
  * Assets tasks
@@ -9,7 +9,7 @@ const { version } = require('../../package.json')
 /**
  * Copy assets such as icons and images into the distribution
  */
-function assets() {
+export function assets() {
   return gulp
     .src('packages/assets/**', { encoding: false })
     .pipe(gulp.dest('dist/assets/'))
@@ -20,16 +20,16 @@ function assets() {
  */
 
 /* Copy JS files into their relevant folders */
-function jsFolder() {
+export function jsFolder() {
   return gulp.src('dist/*.min.{js,js.map}').pipe(gulp.dest('dist/js/'))
 }
 
 /* Copy CSS files into their relevant folders */
-function cssFolder() {
+export function cssFolder() {
   return gulp.src('dist/*.min.{css,css.map}').pipe(gulp.dest('dist/css/'))
 }
 
-async function createZip() {
+export async function createZip() {
   const { default: zip } = await import('gulp-zip')
 
   return gulp
@@ -44,13 +44,6 @@ async function createZip() {
         encoding: false
       }
     )
-    .pipe(zip(`nhsuk-frontend-${version}.zip`))
+    .pipe(zip(`nhsuk-frontend-${pkg.version}.zip`))
     .pipe(gulp.dest('dist'))
 }
-
-module.exports = {
-  assets,
-  jsFolder,
-  cssFolder,
-  createZip
-}

shared/tasks/scripts.js renamed to shared/tasks/scripts.mjs

@@ -1,18 +1,18 @@
-const { join, relative } = require('path')
-const { cwd } = require('process')
+import { join, relative } from 'path'
+import { cwd } from 'process'
 
-const gulp = require('gulp')
-const rename = require('gulp-rename')
-const terser = require('gulp-terser')
-const PluginError = require('plugin-error')
-const webpack = require('webpack-stream')
+import gulp from 'gulp'
+import rename from 'gulp-rename'
+import terser from 'gulp-terser'
+import PluginError from 'plugin-error'
+import webpack from 'webpack-stream'
 
-const { version } = require('../../package.json')
+import pkg from '../../package.json' with { type: 'json' }
 
 /**
  * Compile JavaScript task
  */
-function webpackJS(done) {
+export function webpackJS(done) {
   return gulp
     .src('./packages/nhsuk.js', {
       sourcemaps: true
@@ -67,7 +67,7 @@ function webpackJS(done) {
 /**
  * Minify JavaScript task
  */
-function minifyJS() {
+export function minifyJS() {
   return gulp
     .src(
       [
@@ -90,7 +90,7 @@ function minifyJS() {
     )
     .pipe(
       rename({
-        suffix: `-${version}.min`
+        suffix: `-${pkg.version}.min`
       })
     )
     .pipe(
@@ -99,8 +99,3 @@ function minifyJS() {
       })
     )
 }
-
-module.exports = {
-  webpackJS,
-  minifyJS
-}

shared/tasks/styles.js renamed to shared/tasks/styles.mjs

@@ -1,24 +1,24 @@
-const { join, relative } = require('path')
-const { cwd } = require('process')
-const { Transform } = require('stream')
+import { join, relative } from 'path'
+import { cwd } from 'process'
+import { Transform } from 'stream'
 
-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 PluginError = require('plugin-error')
-const dartSass = require('sass-embedded')
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
+import gulp from 'gulp'
+import postcss from 'gulp-postcss'
+import rename from 'gulp-rename'
+import gulpSass from 'gulp-sass'
+import PluginError from 'plugin-error'
+import dartSass from 'sass-embedded'
 
-const { version } = require('../../package.json')
+import pkg from '../../package.json' with { type: 'json' }
 
 const sass = gulpSass(dartSass)
 
 /**
  * Compile Sass task
  */
-function compileCSS(done) {
+export function compileCSS(done) {
   return gulp
     .src(['packages/nhsuk.scss'], {
       sourcemaps: true
@@ -62,7 +62,7 @@ function compileCSS(done) {
 /**
  * Minify CSS task
  */
-function minifyCSS() {
+export function minifyCSS() {
   return gulp
     .src(
       [
@@ -74,7 +74,7 @@ function minifyCSS() {
     .pipe(postcss([cssnano()]))
     .pipe(
       rename({
-        suffix: `-${version}.min`
+        suffix: `-${pkg.version}.min`
       })
     )
     .pipe(
@@ -83,8 +83,3 @@ function minifyCSS() {
       })
     )
 }
-
-module.exports = {
-  compileCSS,
-  minifyCSS
-}