manage.get.gov/src/gulpfile.js

/* gulpfile.js */

// We need a hook into gulp for the JS jobs definitions
const gulp = require('gulp');
// For bundling
const webpack = require('webpack-stream');
// Out-of-the-box uswds compiler
const uswds = require('@uswds/compile');
// For minimizing and optimizing
const TerserPlugin = require('terser-webpack-plugin');

const ASSETS_DIR = './registrar/assets/';
const JS_BUNDLE_DEST = ASSETS_DIR + 'js';
const JS_SOURCES = [
    { src: ASSETS_DIR + 'src/js/getgov/*.js', output: 'getgov.min.js' },
    { src: ASSETS_DIR + 'src/js/getgov-admin/*.js', output: 'getgov-admin.min.js' },
];

/**
 * USWDS version
 * Set the version of USWDS you're using (2 or 3)
 */
uswds.settings.version = 3;

/**
 * Path settings
 * Set as many as you need
 */
uswds.paths.dist.css = ASSETS_DIR + 'css';
uswds.paths.dist.sass = ASSETS_DIR + 'sass';
uswds.paths.dist.theme = ASSETS_DIR + 'src/sass/_theme';
uswds.paths.dist.fonts = ASSETS_DIR + 'fonts';
uswds.paths.dist.js = ASSETS_DIR + 'js';
uswds.paths.dist.img = ASSETS_DIR + 'img';

/**
 * Function: Create Bundling Task
 * 
 * This function generates a Gulp task for bundling JavaScript files. It accepts a source file pattern
 * and an output filename, then processes the files using Webpack for tasks like transpilation, bundling, 
 * and optimization. The resulting task performs the following:
 * 
 * 1. Reads the JavaScript source files specified by the `source` parameter.
 * 2. Transforms the JavaScript using Webpack:
 *    - Runs in "production" mode by default for optimizations (use "development" mode for easier debugging).
 *    - Generates a source map for better debugging experience, linking the output to the original source.
 *    - Minifies the code using TerserPlugin while suppressing the generation of `.LICENSE.txt` files.
 *    - Processes the JavaScript with Babel to ensure compatibility with older browsers by using the `@babel/preset-env`.
 * 3. Outputs the bundled and optimized JavaScript to the specified destination folder.
 * 
 * Parameters:
 * - `source`: A glob pattern or file path specifying the input JavaScript files.
 * - `output`: The filename for the generated JavaScript bundle.
 * 
 * Returns:
 * - A function that can be executed as a Gulp task.
 */
function createBundleTask(source, output) {
    return () =>
        gulp
            .src(source)
            .pipe(
                webpack({
                    mode: 'production', // Use 'development' if you want less minification during debugging
                    devtool: 'source-map', // Enable source map generation
                    optimization: {
                        minimize: true,
                        minimizer: [
                            new TerserPlugin({
                                extractComments: false, // Prevents generating .LICENSE.txt
                            }),
                        ],
                    },
                    output: { filename: output },
                    module: {
                        rules: [
                            {
                                test: /\.js$/,
                                exclude: /node_modules/,
                                use: {
                                    loader: 'babel-loader',
                                    options: { presets: ['@babel/preset-env'] },
                                },
                            },
                        ],
                    },
                })
            )
            .pipe(gulp.dest(JS_BUNDLE_DEST));
}

// Create tasks for JavaScript sources
JS_SOURCES.forEach(({ src, output }, index) => {
    const taskName = `bundle-js-${index}`;
    gulp.task(taskName, createBundleTask(src, output));
});

/**
 * Watch for changes in JavaScript modules
 */
gulp.task('watch-js', () => {
    JS_SOURCES.forEach(({ src }, index) => {
        gulp.watch(src, gulp.series(`bundle-js-${index}`));
    });
});

/**
 * Combine all watch tasks
 */
gulp.task('watch', gulp.parallel('watch-js', uswds.watch));

/**
 * Exports
 * Add as many as you need
 * Some tasks combine USWDS compilation and JavaScript precompilation.
 */
exports.default = gulp.series(uswds.compile, ...JS_SOURCES.map((_, i) => `bundle-js-${i}`));
exports.init = uswds.init;
exports.compile = gulp.series(uswds.compile, ...JS_SOURCES.map((_, i) => `bundle-js-${i}`));
exports.watch = uswds.watch;
exports.watchAll = gulp.parallel('watch');
exports.copyAssets = uswds.copyAssets
exports.updateUswds = uswds.updateUswds