Skip to content

Commit 19bb8aa

Browse files
colinrotherhamcolinrotherham
committed
Split out gulp tasks
1 parent 104d8a3 commit 19bb8aa

7 files changed

Lines changed: 316 additions & 259 deletions

File tree

‎docs/contributing/application-architecture.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ Node package manager modules for third party dependencies. This folder is automa
2828

2929
NHS.UK frontend individual components files, such as all the stylesheet (scss) files, HTML templates (nunjucks), READMEs and assets.
3030

31-
`tasks/`
31+
`shared/tasks/`
3232

33-
Gulp.js tasks to build the `dist/` folder from the files in `app`.
33+
Read about [npm and Gulp tasks](tooling.md) for more information.
3434

3535
`tests/`
3636

‎gulpfile.js‎

Lines changed: 39 additions & 239 deletions
Original file line numberDiff line numberDiff line change
@@ -1,244 +1,23 @@
1-
const { join, relative } = require('path')
2-
const { cwd } = require('process')
3-
const { Transform } = require('stream')
4-
5-
const autoprefixer = require('autoprefixer')
6-
const cssnano = require('cssnano')
1+
const browserSync = require('browser-sync')
72
const gulp = require('gulp')
8-
const postcss = require('gulp-postcss')
9-
const rename = require('gulp-rename')
10-
const gulpSass = require('gulp-sass')
11-
const terser = require('gulp-terser')
12-
const PluginError = require('plugin-error')
13-
const dartSass = require('sass-embedded')
14-
const webpack = require('webpack-stream')
15-
16-
const { version } = require('./package.json')
17-
18-
/**
19-
* Import gulp tasks used for creating
20-
* our website pages.
21-
*/
22-
require('./tasks/docs')
23-
24-
/**
25-
* Remove all compiled files
26-
* @param {string[]} pattern - glob patterns or paths to clean
27-
* @param {string[]} [ignore] - glob patterns or paths to ignore
28-
*/
29-
async function clean(pattern, ignore) {
30-
const { deleteAsync } = await import('del')
31-
await deleteAsync(pattern, { ignore })
32-
}
33-
34-
/**
35-
* CSS tasks
36-
*/
37-
38-
const sass = gulpSass(dartSass)
393

40-
/* Build the CSS from source */
41-
function compileCSS(done) {
42-
return gulp
43-
.src(['packages/nhsuk.scss'], {
44-
sourcemaps: true
45-
})
46-
.pipe(
47-
sass({
48-
sourceMap: true,
49-
sourceMapIncludeSources: true
50-
}).on('error', (error) => {
51-
done(
52-
new PluginError('compileCSS', error.messageFormatted, {
53-
showProperties: false
54-
})
55-
)
56-
})
57-
)
58-
.pipe(
59-
new Transform({
60-
objectMode: true,
61-
62-
// Make source file:// paths relative
63-
transform(file, enc, cb) {
64-
if (file.sourceMap?.sources) {
65-
file.sourceMap.sources = file.sourceMap.sources.map((path) =>
66-
relative(join(cwd(), 'dist'), join(file.base, path))
67-
)
68-
}
69-
70-
cb(null, file)
71-
}
72-
})
73-
)
74-
.pipe(postcss([autoprefixer()]))
75-
.pipe(
76-
gulp.dest('dist/', {
77-
sourcemaps: '.'
78-
})
79-
)
80-
}
81-
82-
/* Minify CSS and add a min.css suffix */
83-
function minifyCSS() {
84-
return gulp
85-
.src(
86-
[
87-
'dist/*.css',
88-
'!dist/*.min.css' // don't re-minify minified css
89-
],
90-
{ sourcemaps: true }
91-
)
92-
.pipe(postcss([cssnano()]))
93-
.pipe(
94-
rename({
95-
suffix: `-${version}.min`
96-
})
97-
)
98-
.pipe(
99-
gulp.dest('dist/', {
100-
sourcemaps: '.'
101-
})
102-
)
103-
}
104-
105-
/**
106-
* JavaScript tasks
107-
*/
108-
109-
/* Use Webpack to build and minify the NHS.UK components JS. */
110-
function webpackJS(done) {
111-
return gulp
112-
.src('./packages/nhsuk.js', {
113-
sourcemaps: true
114-
})
115-
.pipe(
116-
webpack({
117-
devtool: 'source-map',
118-
mode: 'production',
119-
module: {
120-
rules: [
121-
{
122-
use: {
123-
loader: 'babel-loader',
124-
options: {
125-
rootMode: 'upward'
126-
}
127-
}
128-
}
129-
]
130-
},
131-
optimization: {
132-
minimize: false // minification is handled by terser
133-
},
134-
output: {
135-
filename: 'nhsuk.js',
136-
137-
// Make source webpack:// paths relative
138-
devtoolModuleFilenameTemplate(info) {
139-
return relative(join(cwd(), 'dist'), info.absoluteResourcePath)
140-
}
141-
},
142-
stats: {
143-
colors: true,
144-
errors: false
145-
},
146-
target: 'browserslist'
147-
}).on('error', (error) => {
148-
done(
149-
new PluginError('webpackJS', error, {
150-
showProperties: false
151-
})
152-
)
153-
})
154-
)
155-
.pipe(
156-
gulp.dest('./dist', {
157-
sourcemaps: '.'
158-
})
159-
)
160-
}
161-
162-
/* Minify the JS file for release */
163-
function minifyJS() {
164-
return gulp
165-
.src(
166-
[
167-
'dist/*.js',
168-
'!dist/*.min.js' // don't re-minify minified javascript
169-
],
170-
{ sourcemaps: true }
171-
)
172-
.pipe(
173-
terser({
174-
format: { comments: false },
175-
sourceMap: {
176-
includeSources: true
177-
},
178-
179-
// Compatibility workarounds
180-
ecma: 5,
181-
safari10: true
182-
})
183-
)
184-
.pipe(
185-
rename({
186-
suffix: `-${version}.min`
187-
})
188-
)
189-
.pipe(
190-
gulp.dest('dist/', {
191-
sourcemaps: '.'
192-
})
193-
)
194-
}
195-
196-
/**
197-
* Assets tasks
198-
*/
199-
200-
/**
201-
* Copy assets such as icons and images into the distribution
202-
*/
203-
function assets() {
204-
return gulp
205-
.src('packages/assets/**', { encoding: false })
206-
.pipe(gulp.dest('dist/assets/'))
207-
}
208-
209-
/**
210-
* Release tasks
211-
*/
212-
213-
/* Copy JS files into their relevant folders */
214-
function jsFolder() {
215-
return gulp.src('dist/*.min.{js,js.map}').pipe(gulp.dest('dist/js/'))
216-
}
217-
218-
/* Copy CSS files into their relevant folders */
219-
220-
function cssFolder() {
221-
return gulp.src('dist/*.min.{css,css.map}').pipe(gulp.dest('dist/css/'))
222-
}
223-
224-
async function createZip() {
225-
const { default: zip } = await import('gulp-zip')
226-
227-
return gulp
228-
.src(
229-
[
230-
'dist/css/*.min.{css,css.map}',
231-
'dist/js/*.min.{js,js.map}',
232-
'dist/assets/**'
233-
],
234-
{
235-
base: 'dist',
236-
encoding: false
237-
}
238-
)
239-
.pipe(zip(`nhsuk-frontend-${version}.zip`))
240-
.pipe(gulp.dest('dist'))
241-
}
4+
const {
5+
buildHTML,
6+
validateHTML,
7+
copyCSS,
8+
copyJS,
9+
copyBinaryAssets,
10+
serve
11+
} = require('./shared/tasks/app')
12+
const { clean } = require('./shared/tasks/clean')
13+
const {
14+
assets,
15+
cssFolder,
16+
jsFolder,
17+
createZip
18+
} = require('./shared/tasks/release')
19+
const { webpackJS, minifyJS } = require('./shared/tasks/scripts')
20+
const { compileCSS, minifyCSS } = require('./shared/tasks/styles')
24221

24322
/**
24423
* Development tasks
@@ -273,6 +52,27 @@ gulp.task('watch', () =>
27352
])
27453
)
27554

55+
/**
56+
* Docs tasks
57+
*/
58+
59+
gulp.task(
60+
'docs:build',
61+
gulp.series([copyCSS, copyJS, copyBinaryAssets, buildHTML, validateHTML])
62+
)
63+
64+
gulp.task('docs:watch', () =>
65+
Promise.all([
66+
gulp.watch(['**/*.njk'], buildHTML),
67+
gulp.watch(['dist/**/*.html']).on('change', browserSync.reload),
68+
gulp.watch(['dist/*.min.{css,css.map}'], copyCSS),
69+
gulp.watch(['dist/*.min.{js,js.map}'], copyJS),
70+
gulp.watch(['packages/assets/**/*'], copyBinaryAssets)
71+
])
72+
)
73+
74+
gulp.task('docs:serve', gulp.series([serve]))
75+
27676
/**
27777
* The default task is to serve the docs and watch for changes
27878
*/

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

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ const { HtmlValidate, formatterFactory } = require('html-validate')
1010
const nunjucks = require('nunjucks')
1111
const PluginError = require('plugin-error')
1212

13-
const validatorConfig = require('../.htmlvalidate')
14-
const { version } = require('../package.json')
13+
const validatorConfig = require('../../.htmlvalidate')
14+
const { version } = require('../../package.json')
1515

1616
/**
1717
* Compile Nunjucks into HTML
@@ -154,22 +154,14 @@ function serve() {
154154
})
155155
}
156156

157-
gulp.task(
158-
'docs:build',
159-
gulp.series([copyCSS, copyJS, copyBinaryAssets, buildHTML, validateHTML])
160-
)
161-
162-
gulp.task('docs:watch', () =>
163-
Promise.all([
164-
gulp.watch(['**/*.njk'], buildHTML),
165-
gulp.watch(['dist/**/*.html']).on('change', browserSync.reload),
166-
gulp.watch(['dist/*.min.{css,css.map}'], copyCSS),
167-
gulp.watch(['dist/*.min.{js,js.map}'], copyJS),
168-
gulp.watch(['packages/assets/**/*'], copyBinaryAssets)
169-
])
170-
)
171-
172-
gulp.task('docs:serve', gulp.series([serve]))
157+
module.exports = {
158+
buildHTML,
159+
validateHTML,
160+
copyCSS,
161+
copyJS,
162+
copyBinaryAssets,
163+
serve
164+
}
173165

174166
/**
175167
* @import { Result } from 'html-validate'

‎shared/tasks/clean.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Remove all compiled files
3+
* @param {string[]} pattern - glob patterns or paths to clean
4+
* @param {string[]} [ignore] - glob patterns or paths to ignore
5+
*/
6+
async function clean(pattern, ignore) {
7+
const { deleteAsync } = await import('del')
8+
await deleteAsync(pattern, { ignore })
9+
}
10+
11+
module.exports = {
12+
clean
13+
}

0 commit comments

Comments
 (0)