gulpfile.js WIP

gulpfile.js

@@ -2,11 +2,11 @@ const fs = require('fs/promises');
 const path = require('path');
 const process = require('process');
 const sirv = require('sirv-cli');
-const svgoPkg = require('svgo/package.json');
+const { version: SVGO_VERSION } = require('svgo/package.json');
 const sass = require('sass');
 const gulp = require('gulp');
 const gulpSourcemaps = require('gulp-sourcemaps');
-const gulpSass = require('gulp-sass');
+const gulpSass = require('gulp-sass')(sass);
 const gulpNunjucks = require('gulp-nunjucks');
 const gulpHtmlmin = require('gulp-htmlmin');
 const rollup = require('rollup');
@@ -39,21 +39,32 @@ const readJSON = async (path) => {
   return JSON.parse(content);
 };
 
-function css() {
-  const boundSass = gulpSass(sass);
+const copy = () => {
+  return gulp
+    .src([
+      'src/{.well-known,imgs,test-svgs}/**',
+      // Exclude the test-svgs files except for `car-lite.svg`
+      // which is used in the demo
+      '!src/test-svgs/!(car-lite.svg)',
+      'src/*.json',
+    ])
+    .pipe(gulp.dest('build'));
+};
+
+const css = () => {
   return gulp
     .src('src/css/*.scss')
     .pipe(gulpSourcemaps.init())
     .pipe(
-      boundSass
+      gulpSass
         .sync({ outputStyle: IS_DEV_TASK ? 'expanded' : 'compressed' })
-        .on('error', boundSass.logError)
+        .on('error', gulpSass.logError)
     )
     .pipe(gulpSourcemaps.write('./'))
     .pipe(gulp.dest('build/'));
-}
+};
 
-async function html() {
+const html = async () => {
   const [config, changelog, headCSS] = await Promise.all([
     readJSON(path.join(__dirname, 'src', 'config.json')),
     readJSON(path.join(__dirname, 'src', 'changelog.json')),
@@ -65,7 +76,7 @@ async function html() {
       plugins: config.plugins,
       headCSS,
       changelog,
-      SVGO_VERSION: svgoPkg.version,
+      SVGO_VERSION,
     })
   );
 
@@ -75,13 +86,13 @@ async function html() {
   }
 
   return stream.pipe(gulp.dest('build'));
-}
+};
 
 const rollupCaches = new Map();
 
-async function js(entry, outputPath) {
+const js = async (entry, outputPath) => {
   const name = path.basename(path.dirname(entry));
-  const changelog = await readJSON(
+  const [latestVersion] = await readJSON(
     path.join(__dirname, 'src', 'changelog.json')
   );
   const bundle = await rollup.rollup({
@@ -90,20 +101,26 @@ async function js(entry, outputPath) {
     plugins: [
       rollupReplace({
         preventAssignment: true,
-        SVGOMG_VERSION: JSON.stringify(changelog[0].version),
+        SVGOMG_VERSION: JSON.stringify(latestVersion.version),
       }),
       rollupResolve({ browser: true }),
       rollupCommon({ include: /node_modules/ }),
       IS_DEV_TASK ? '' : rollupTerser(), // Don't use terser on development
     ],
   });
+
   rollupCaches.set(entry, bundle.cache);
+
   await bundle.write({
     sourcemap: true,
     format: 'iife',
     file: `build/${outputPath}/${name}.js`,
   });
-}
+};
+
+const clean = () => {
+  return fs.rm('build', { force: true, recursive: true });
+};
 
 const allJs = gulp.parallel(
   js.bind(null, 'js/prism-worker/index.js', 'js/'),
@@ -113,41 +130,25 @@ const allJs = gulp.parallel(
   js.bind(null, 'js/page/index.js', 'js/')
 );
 
-function copy() {
-  return gulp
-    .src([
-      'src/{.well-known,imgs,test-svgs}/**',
-      // Exclude the test-svgs files except for `car-lite.svg`
-      // which is used in the demo
-      '!src/test-svgs/!(car-lite.svg)',
-      'src/*.json',
-    ])
-    .pipe(gulp.dest('build'));
-}
-
-function clean() {
-  return fs.rm('build', { force: true, recursive: true });
-}
-
 const mainBuild = gulp.parallel(gulp.series(css, html), allJs, copy);
 
-function watch() {
+const watch = () => {
   gulp.watch(['src/css/**/*.scss'], gulp.series(css, html));
   gulp.watch(['src/js/**/*.js'], allJs);
   gulp.watch(
     ['src/*.{html,json}', 'src/**/*.svg'],
     gulp.parallel(html, copy, allJs)
   );
-}
+};
 
-function serve() {
+const serve = () => {
   sirv('build', {
     host: 'localhost',
     port: 8080,
     dev: true,
     clear: false,
   });
-}
+};
 
 exports.clean = clean;
 exports.allJs = allJs;