Files
notifications-admin/gulpfile.js

296 lines
8.4 KiB
JavaScript
Raw Normal View History

// GULPFILE
// - - - - - - - - - - - - - - -
// This file processes all of the assets in the "src" folder
// and outputs the finished files in the "dist" folder.
// 1. LIBRARIES
// - - - - - - - - - - - - - - -
const { src, pipe, dest, series, parallel, watch } = require('gulp');
const rollupPluginCommonjs = require('rollup-plugin-commonjs');
const rollupPluginNodeResolve = require('rollup-plugin-node-resolve');
const streamqueue = require('streamqueue');
const stylish = require('jshint-stylish');
const uswds = require("@uswds/compile");
const plugins = {};
plugins.addSrc = require('gulp-add-src');
plugins.babel = require('gulp-babel');
plugins.cleanCSS = require('gulp-clean-css');
plugins.concat = require('gulp-concat');
plugins.cssUrlAdjuster = require('gulp-css-url-adjuster');
plugins.jshint = require('gulp-jshint');
plugins.prettyerror = require('gulp-prettyerror');
plugins.rollup = require('gulp-better-rollup')
plugins.sass = require('gulp-sass')(require('sass'));
plugins.sassLint = require('gulp-sass-lint');
plugins.uglify = require('gulp-uglify');
// 2. CONFIGURATION
// - - - - - - - - - - - - - - -
const paths = {
src: 'app/assets/',
dist: 'app/static/',
templates: 'app/templates/',
npm: 'node_modules/',
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/'))
},
2022-12-14 13:30:46 -05:00
fonts: () => {
return src(paths.src + 'fonts/**/*')
.pipe(dest(paths.dist + 'fonts/'));
}
};
const javascripts = () => {
// JS from third-party sources
// We assume none of it will need to pass through Babel
const vendored = src(paths.src + 'javascripts/modules/all.mjs')
// Use Rollup to combine all JS in JS module format into a Immediately Invoked Function
// Expression (IIFE) to:
// - deliver it in one bundle
// - allow it to run in browsers without support for JS Modules
.pipe(plugins.rollup(
{
plugins: [
// determine module entry points from either 'module' or 'main' fields in package.json
rollupPluginNodeResolve({
mainFields: ['module', 'main']
}),
// 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
rollupPluginCommonjs({
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',
paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
paths.npm + 'timeago/jquery.timeago.js',
Support registering a new authenticator This adds Yubico's FIDO2 library and two APIs for working with the "navigator.credentials.create()" function in JavaScript. The GET API uses the library to generate options for the "create()" function, and the POST API decodes and verifies the resulting credential. While the options and response are dict-like, CBOR is necessary to encode some of the byte-level values, which can't be represented in JSON. Much of the code here is based on the Yubico library example [1][2]. Implementation notes: - There are definitely better ways to alert the user about failure, but window.alert() will do for the time being. Using location.reload() is also a bit jarring if the page scrolls, but not a major issue. - Ideally we would use window.fetch() to do AJAX calls, but we don't have a polyfill for this, and we use $.ajax() elsewhere [3]. We need to do a few weird tricks [6] to stop jQuery trashing the data. - The FIDO2 server doesn't serve web requests; it's just a "server" in the sense of WebAuthn terminology. It lives in its own module, since it needs to be initialised with the app / config. - $.ajax returns a promise-like object. Although we've used ".fail()" elsewhere [3], I couldn't find a stub object that supports it, so I've gone for ".catch()", and used a Promise stub object in tests. - WebAuthn only works over HTTPS, but there's an exception for "localhost" [4]. However, the library is a bit too strict [5], so we have to disable origin verification to avoid needing HTTPS for dev work. [1]: https://github.com/Yubico/python-fido2/blob/c42d9628a4f33d20c4401096fa8d3fc466d5b77f/examples/server/server.py [2]: https://github.com/Yubico/python-fido2/blob/c42d9628a4f33d20c4401096fa8d3fc466d5b77f/examples/server/static/register.html [3]: https://github.com/alphagov/notifications-admin/blob/91453d36395b7a0cf2998dfb8a5f52cc9e96640f/app/assets/javascripts/updateContent.js#L33 [4]: https://stackoverflow.com/questions/55971593/navigator-credentials-is-null-on-local-server [5]: https://github.com/Yubico/python-fido2/blob/c42d9628a4f33d20c4401096fa8d3fc466d5b77f/fido2/rpid.py#L69 [6]: https://stackoverflow.com/questions/12394622/does-jquery-ajax-or-load-allow-for-responsetype-arraybuffer
2021-05-07 18:10:07 +01:00
paths.npm + 'textarea-caret/index.js',
paths.npm + 'cbor-js/cbor.js'
]));
// JS local to this application
const local = src([
paths.toolkit + 'javascripts/govuk/modules.js',
paths.toolkit + 'javascripts/govuk/show-hide-content.js',
paths.src + 'javascripts/govuk/cookie-functions.js',
paths.src + 'javascripts/consent.js',
paths.src + 'javascripts/analytics/analytics.js',
paths.src + 'javascripts/analytics/init.js',
paths.src + 'javascripts/cookieMessage.js',
paths.src + 'javascripts/stick-to-window-when-scrolling.js',
paths.src + 'javascripts/copyToClipboard.js',
paths.src + 'javascripts/autofocus.js',
paths.src + 'javascripts/enhancedTextbox.js',
paths.src + 'javascripts/fileUpload.js',
paths.src + 'javascripts/radioSelect.js',
paths.src + 'javascripts/updateContent.js',
paths.src + 'javascripts/listEntry.js',
paths.src + 'javascripts/liveSearch.js',
paths.src + 'javascripts/errorTracking.js',
paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
paths.src + 'javascripts/fullscreenTable.js',
paths.src + 'javascripts/previewPane.js',
paths.src + 'javascripts/colourPreview.js',
paths.src + 'javascripts/templateFolderForm.js',
paths.src + 'javascripts/collapsibleCheckboxes.js',
paths.src + 'javascripts/radioSlider.js',
paths.src + 'javascripts/registerSecurityKey.js',
paths.src + 'javascripts/authenticateSecurityKey.js',
paths.src + 'javascripts/updateStatus.js',
paths.src + 'javascripts/errorBanner.js',
paths.src + 'javascripts/homepage.js',
paths.src + 'javascripts/main.js',
])
2022-07-21 18:25:23 -07:00
.pipe(plugins.prettyerror())
.pipe(plugins.babel({
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 streamqueue({ objectMode: true }, vendored, local)
.pipe(plugins.uglify())
.pipe(plugins.concat('all.js'))
.pipe(dest(paths.dist + 'javascripts/'))
};
const sass = () => {
return src([
2022-07-21 18:25:23 -07:00
paths.src + '/stylesheets/main*.scss',
paths.src + '/stylesheets/print.scss'
])
.pipe(plugins.prettyerror())
.pipe(plugins.sass.sync({
includePaths: [
2022-12-14 13:14:35 -05:00
paths.npm + 'govuk-elements-sass/public/sass/',
paths.toolkit + 'stylesheets/',
paths.govuk_frontend,
paths.npm
]
}))
.pipe(plugins.cssUrlAdjuster({
replace: [staticPathMatcher, '/']
}))
// cssUrlAdjuster outputs uncompressed CSS so we need to perform the compression here
.pipe(plugins.cleanCSS({ compatibility: '*' }))
.pipe(dest(paths.dist + 'stylesheets/'))
};
// Copy images
const images = () => {
return src([
2022-08-03 17:16:35 -07:00
paths.toolkit + 'images/**/*',
paths.govuk_frontend + 'assets/images/**/*',
2022-07-21 18:25:23 -07:00
paths.src + 'images/**/*',
paths.src + 'img/**/*',
2022-07-21 18:25:23 -07:00
paths.template + 'assets/images/**/*'
2022-08-03 17:16:35 -07:00
2022-07-21 18:25:23 -07:00
])
.pipe(dest(paths.dist + 'images/'))
};
const watchFiles = {
javascripts: (cb) => {
watch([paths.src + 'javascripts/**/*'], javascripts);
cb();
},
sass: (cb) => {
watch([paths.src + 'stylesheets/**/*'], sass);
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 = {
'sass': () => {
return src([
2022-07-21 18:25:23 -07:00
paths.src + 'stylesheets/*.scss',
paths.src + 'stylesheets/components/*.scss',
paths.src + 'stylesheets/views/*.scss',
])
.pipe(plugins.sassLint({
'options': { 'formatter': 'stylish' },
2022-07-21 18:25:23 -07:00
'rules': { 'mixins-before-declarations': [2, { 'exclude': ['media', 'govuk-media-query'] }] }
}))
.pipe(plugins.sassLint.format())
.pipe(plugins.sassLint.failOnError());
},
'js': (cb) => {
return src(
2022-07-21 18:25:23 -07:00
paths.src + 'javascripts/**/*.js'
)
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter(stylish))
.pipe(plugins.jshint.reporter('fail'))
}
};
// Default: compile everything
const defaultTask = parallel(
parallel(
2022-12-14 13:30:46 -05:00
copy.fonts,
2022-07-21 18:25:23 -07:00
images
),
series(
copy.error_pages,
series(
javascripts
),
sass,
uswds.compile,
uswds.copyAssets
)
);
// Watch for changes and re-run tasks
const watchForChanges = parallel(
watchFiles.javascripts,
watchFiles.sass,
watchFiles.images,
watchFiles.self
);
exports.default = defaultTask;
exports.lint = series(lint.sass, lint.js);
// Optional: recompile on changes
exports.watch = series(defaultTask, watchForChanges);
2023-04-24 14:57:35 -04:00
// 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';
2023-04-24 14:57:35 -04:00
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.watch = uswds.watch;
exports.copyAssets = uswds.copyAssets;