Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate Gulp and Node.js build tasks to ESM #2982

Merged
merged 3 commits into from
Nov 21, 2022
Merged

Migrate Gulp and Node.js build tasks to ESM #2982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2fbdeeb
Prefer `yargs-parser` versus `yargs` CLI tool
colinrotherham Nov 21, 2022
e72c9b0
Prefer `minimatch` to `slash` in PostCSS config
colinrotherham Nov 8, 2022
39d7329
Migrate Gulp and Node.js build tasks to ESM
colinrotherham Nov 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions config/paths.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const rootPath = dirname(__dirname)
* Config root paths
*/
const configPaths = {
root: rootPath,
src: join(rootPath, 'src'),
config: join(rootPath, 'config'),
node_modules: join(rootPath, 'node_modules'),
Expand Down
16 changes: 5 additions & 11 deletions docs/contributing/tasks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
**`npm start` will trigger `gulp dev` that will:**
- clean the `./public` folder
- compile JavaScript and Sass, including documentation (`gulp compile`)
- compile again when `.scss` and `.mjs` files change (`gulp watch`)
- compile again when `.scss` and `.mjs` files change
- runs `npm run serve`

**`npm test` will do the following:**
Expand All @@ -37,14 +37,14 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
- copy Nunjucks component template/macro files, including JSON configs
- copy GOV.UK Prototype Kit config files
- copy JavaScript ESM source files
- compile JavaScript ESM to CommonJS (`gulp js:compile`)
- compile JavaScript ESM to CommonJS
- runs `npm run test:build:package` (which will test the output is correct)

**`npm run build:dist` will do the following:**
- output files into `./dist`, or another location via the `--destination` flag
- clean the `./dist` folder
- compile JavaScript and Sass, including documentation (`gulp compile`)
- copy fonts and images (`gulp copy:assets`)
- copy fonts and images
- append version number from `package/package.json` to compiled JavaScript and CSS files
- runs `npm run test:build:dist` (which will test the output is correct)

Expand All @@ -58,24 +58,18 @@ Gulp tasks are defined in `gulpfile.js` and .`/tasks/gulp/` folder.
This task will:
- list out all available tasks

**`gulp watch`**

This task will:
- run `gulp styles` when `.scss` files change
- run `gulp scripts` when `.mjs` files change

**`gulp styles`**

This task will:
- check Sass code quality via Stylelint (`npm run lint:scss`)
- compile Sass to CSS (`gulp scss:compile`) into `./public`, or another location via the `--destination` flag
- compile Sass to CSS into `./public`, or another location via the `--destination` flag
- compile Sass documentation into `./sassdoc`

**`gulp scripts`**

This task will:
- check JavaScript code quality via ESLint (`npm run lint:js`) (using JavaScript Standard Style)
- compile JavaScript ESM to CommonJS (`gulp js:compile`) into `./public`, or another location via the `--destination` flag
- compile JavaScript ESM to CommonJS into `./public`, or another location via the `--destination` flag
- compile JavaScript documentation into `./jsdoc`

**`gulp compile`**
Expand Down
47 changes: 17 additions & 30 deletions gulpfile.js → gulpfile.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
const { join } = require('path')
const gulp = require('gulp')
const taskListing = require('gulp-task-listing')
const configPaths = require('./config/paths.js')
const { destination } = require('./tasks/task-arguments.js')
const slash = require('slash')
import gulp from 'gulp'
import taskListing from 'gulp-task-listing'

// Gulp sub-tasks
require('./tasks/gulp/compile-assets.js')
require('./tasks/gulp/copy-to-destination.js')
require('./tasks/gulp/watch.js')
import { compileJavaScripts, compileStylesheets } from './tasks/gulp/compile-assets.mjs'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we happy losing the gulp js:compile and gulp scss:compile tasks?

They're still available via gulp compile which includes compileJavaScripts() and compileStylesheets()

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can see edge cases where somebody is working on some finicky interaction between CSS and JS, but that feels such an unlikely case, and these are not part of the "public" package json scripts, so I think we're OK to toss 'em.

import { copyAssets, copyFiles } from './tasks/gulp/copy-to-destination.mjs'
import { watch } from './tasks/gulp/watch.mjs'

// Node tasks
const { updateDistAssetsVersion } = require('./tasks/asset-version.js')
const { updatePrototypeKitConfig } = require('./tasks/prototype-kit-config.js')
const { clean } = require('./tasks/clean.js')
const { npmScriptTask } = require('./tasks/run.js')
import { updateDistAssetsVersion } from './tasks/asset-version.mjs'
import { updatePrototypeKitConfig } from './tasks/prototype-kit-config.mjs'
import { clean } from './tasks/clean.mjs'
import { npmScriptTask } from './tasks/run.mjs'

/**
* Umbrella scripts tasks (for watch)
Expand All @@ -23,7 +19,7 @@ const { npmScriptTask } = require('./tasks/run.js')
gulp.task('scripts', gulp.series(
npmScriptTask('lint:js', ['--silent']),
npmScriptTask('build:jsdoc', ['--silent']),
'js:compile'
compileJavaScripts
))

/**
Expand All @@ -33,25 +29,16 @@ gulp.task('scripts', gulp.series(
gulp.task('styles', gulp.series(
npmScriptTask('lint:scss', ['--silent']),
npmScriptTask('build:sassdoc', ['--silent']),
'scss:compile'
compileStylesheets
))

/**
* Copy assets task
* Copies assets to taskArguments.destination (dist)
*/
gulp.task('copy:assets', () => {
return gulp.src(slash(join(configPaths.assets, '**/*')))
.pipe(gulp.dest(slash(join(destination, 'assets'))))
})

/**
* Compile task for local & heroku
* Runs JavaScript and Sass compilation, including documentation
*/
gulp.task('compile', gulp.series(
'js:compile',
'scss:compile',
compileJavaScripts,
compileStylesheets,
npmScriptTask('build:jsdoc', ['--silent']),
npmScriptTask('build:sassdoc', ['--silent'])
))
Expand All @@ -63,7 +50,7 @@ gulp.task('compile', gulp.series(
gulp.task('dev', gulp.series(
clean,
'compile',
'watch',
watch,
npmScriptTask('serve', ['--silent', '--workspace', 'app'])
))

Expand All @@ -73,8 +60,8 @@ gulp.task('dev', gulp.series(
*/
gulp.task('build:package', gulp.series(
clean,
'copy:files',
'js:compile',
copyFiles,
compileJavaScripts,
updatePrototypeKitConfig
))

Expand All @@ -85,7 +72,7 @@ gulp.task('build:package', gulp.series(
gulp.task('build:dist', gulp.series(
clean,
'compile',
'copy:assets',
copyAssets,
updateDistAssetsVersion
))

Expand Down
110 changes: 58 additions & 52 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
"rollup": "0.56.5",
"sassdoc": "^2.7.4",
"slash": "^3.0.0",
"yargs": "^17.6.2"
"yargs-parser": "^21.1.1"
},
"devDependencies": {
"@percy/cli": "^1.14.0",
Expand Down
Loading