dfe-frontend/gulpfile.js

DfE frontend contains the code you need to design DfE Branded services on top of the GOVUK Design System.

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const clean = require('gulp-clean');
const rename = require('gulp-rename');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const webpack = require('webpack-stream');
const { version } = require('./package.json');

// Define a variable to hold the dynamically imported module
let zip;

// Asynchronously import the gulp-zip module
import('gulp-zip').then(module => {
  zip = module.default;
}).catch(error => console.error('Failed to load gulp-zip', error));



/* Remove all compiled files */
function cleanDist() {
  return gulp.src('dist', { allowEmpty: true })
    .pipe(clean());
}

/**
 * CSS tasks
 */

sass.compiler = require('sass');

/* Build the CSS from source */
function compileCSS() {
  return gulp.src(['packages/dfefrontend.scss'])
    .pipe(sass())
    .pipe(gulp.dest('dist/'))
    .on('error', (err) => {
      console.log(err);
      process.exit(1);
    });
}




/* Minify CSS and add a min.css suffix */
function minifyCSS() {
  return gulp.src([
    'dist/*.css',
    '!dist/*.min.css', // don't re-minify minified css
  ])
    .pipe(cleanCSS())
    .pipe(rename({
      suffix: `-${version}.min`,
    }))
    .pipe(gulp.dest('dist/'));
}

/**
 * JavaScript tasks
 */

/* Use Webpack to build and minify the DFE components JS. */
function webpackJS() {
  return gulp.src('./packages/dfefrontend.js')
    .pipe(webpack({
      mode: 'production',
      module: {
        rules: [
          {
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
          },
        ],
      },
      output: {
        filename: 'dfefrontend.js',
      },
      target: 'web',
    }))
    .pipe(gulp.dest('./dist'));
}

/* Minify the JS file for release */
function minifyJS() {
  return gulp.src([
    'dist/*.js',
    '!dist/*.min.js', // don't re-minify minified javascript
  ])
    .pipe(uglify())
    .pipe(rename({
      suffix: '.min',
    }))
    .pipe(gulp.dest('dist/'));
}

/* Version the JS file for release */
function versionJS() {
  return gulp.src([
    'dist/*.js',
    '!dist/*.min.js', // don't re-minify minified javascript
  ])
    .pipe(uglify())
    .pipe(rename({
      suffix: `-${version}.min`,
    }))
    .pipe(gulp.dest('dist/'));
}

/**
 * Assets tasks
 */

/**
 * Copy assets such as icons and images into the distribution
 */
function assets() {
  return gulp.src('packages/assets/**')
    .pipe(gulp.dest('dist/assets/'));
}

/**
 * Release tasks
 */

/* Copy JS files into their relevant folders */
function jsFolder() {
  return gulp.src('dist/*.min.js', '!dist/js/dfefrontend.min.js')
    .pipe(clean())
    .pipe(gulp.dest('dist/js/'));
}

/* Copy CSS files into their relevant folders */

function cssFolder() {
  return gulp.src('dist/*.min.css')
    .pipe(clean())
    .pipe(gulp.dest('dist/css/'));
}

function createZip() {
    if (!zip) {
      console.error('gulp-zip module not loaded');
      return;
    }
    return gulp.src(['dist/css/*.min.css', 'dist/js/*.min.js', 'dist/assets/**', '!dist/js/dfefrontend.min.js'], { base: 'dist' })
      .pipe(zip(`dfe-frontend-${version}.zip`))
      .pipe(gulp.dest('dist'));
  }

/**
 * Development tasks
 */

/* Recompile CSS, JS and docs when there are any changes */
function watch() {
  gulp.watch(['packages/**/*', 'app/**/*'], gulp.series(['build', 'docs:build']));
}

gulp.task('clean', cleanDist);

gulp.task('style', compileCSS);

gulp.task('build', gulp.series([
  compileCSS,
  webpackJS,
]));

gulp.task('bundle', gulp.series([
  cleanDist,
  'build',
  minifyCSS,
  minifyJS,
  versionJS,
]));

gulp.task('zip', gulp.series([
  'bundle',
  assets,
  jsFolder,
  cssFolder,
  createZip,
]));

gulp.task('watch', watch);

/**
 * The default task is to build everything, serve the docs and watch for changes
 */
gulp.task('default', gulp.series([
  cleanDist,
  'build'
]));