Gulp esm

.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
   plugins: ['mocha'],
   extends: 'eslint:recommended',
   parserOptions: {
-    sourceType: 'module'
+    'ecmaVersion': 2020,
+    'sourceType': 'module'
   },
   rules: {
     indent: ['error', 2],

README.md

@@ -22,7 +22,7 @@ way that you want.
 This repository is where HTML5-Boilerplate is authored. Some of the tools,
 files and processes that you see here are solely for the _production_ of
 HTML5 Boilerplate and are not _part_ of HTML5 Boilerplate. For one example, the
-[gulpfile.babel.js](https://github.com/h5bp/html5-boilerplate/blob/main/gulpfile.babel.js)
+[gulpfile.mjs](https://github.com/h5bp/html5-boilerplate/blob/main/gulpfile.mjs)
 script is used to _build_ the project. It's not part of the project itself.
 
 The project we publish is represented by the contents of the `/dist/`

dist/package.json

@@ -12,7 +12,7 @@
     "start": "webpack-dev-server --open --port 8080"
   },
   "devDependencies": {
-    "webpack": "^5.73.0",
+    "webpack": "^5.74.0",
     "html-webpack-plugin": "^5.5.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3"

gulpfile.babel.js → gulpfile.mjs

@@ -1,19 +1,19 @@
 import fs from 'fs';
 import path from 'path';
-
 import gulp from 'gulp';
-
-// Load all gulp plugins automatically
-// and attach them to the `plugins` object
-import plugins from 'gulp-load-plugins';
-
+import gulpAutoPrefixer from 'gulp-autoprefixer';
+import gulpEslint from 'gulp-eslint';
+import gulpHeader from 'gulp-header';
+import gulpRename from 'gulp-rename';
+import gulpReplace from 'gulp-replace';
 import archiver from 'archiver';
 import glob from 'glob';
-import del from 'del';
+import { deleteSync } from 'del';
 import modernizr from 'modernizr';
-
-import pkg from './package.json';
-import modernizrConfig from './modernizr-config.json';
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+const pkg = require('./package.json');
+const modernizrConfig = require('./modernizr-config.json');
 
 const dirs = pkg['h5bp-configs'].directories;
 
@@ -65,20 +65,19 @@ gulp.task('archive:zip', (done) => {
 });
 
 gulp.task('clean', (done) => {
-  del([
+  deleteSync([
     dirs.archive,
     dirs.dist
-  ]).then(() => {
-    done();
-  });
+  ]);
+  done();
 });
 
 gulp.task('copy:index.html', () => {
 
   let modernizrVersion = pkg.devDependencies.modernizr;
 
   return gulp.src(`${dirs.src}/index.html`)
-    .pipe(plugins().replace(/{{MODERNIZR_VERSION}}/g, modernizrVersion))
+    .pipe(gulpReplace(/{{MODERNIZR_VERSION}}/g, modernizrVersion))
     .pipe(gulp.dest(dirs.dist));
 });
 
@@ -91,11 +90,11 @@ gulp.task('copy:style', () => {
   const banner = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n\n`;
 
   return gulp.src('node_modules/main.css/dist/main.css')
-    .pipe(plugins().header(banner))
-    .pipe(plugins().autoprefixer({
+    .pipe(gulpHeader(banner))
+    .pipe(gulpAutoPrefixer({
       cascade: false
     }))
-    .pipe(plugins().rename({
+    .pipe(gulpRename({
       basename: 'style'
     }))
     .pipe(gulp.dest(`${dirs.dist}/css`));
@@ -135,22 +134,22 @@ gulp.task('modernizr', (done) => {
 gulp.task('lint:js', () =>
   gulp.src([
     `${dirs.src}/js/*.js`,
-    `${dirs.test}/*.js`
-  ]).pipe(plugins().eslint())
-    .pipe(plugins().eslint.failOnError())
+    `${dirs.test}/*.mjs`
+  ]).pipe(gulpEslint())
+    .pipe(gulpEslint.failOnError())
 );
 
 // ---------------------------------------------------------------------
 // | Main tasks                                                        |
 // ---------------------------------------------------------------------
 gulp.task(
-  "copy",
+  'copy',
   gulp.series(
-    "copy:index.html",
-    "copy:license",
-    "copy:style",
-    "copy:misc",
-    "copy:normalize"
+    'copy:index.html',
+    'copy:license',
+    'copy:style',
+    'copy:misc',
+    'copy:normalize'
   )
 );