Merge pull request #5551 from browniebroke/gulpfile-esm

Convert Gulpfile to ESM

hooks/post_gen_project.py

@@ -114,7 +114,7 @@ def remove_sass_files():
 
 
 def remove_gulp_files():
-    file_names = ["gulpfile.js"]
+    file_names = ["gulpfile.mjs"]
     for file_name in file_names:
         os.remove(file_name)
 
@@ -179,7 +179,7 @@ def handle_js_runner(choice, use_docker, use_async):
             remove_keys=["babel"],
             scripts={
                 "dev": "gulp",
-                "build": "gulp generate-assets",
+                "build": "gulp build",
             },
         )
         remove_webpack_files()

{{cookiecutter.project_slug}}/gulpfile.js → {{cookiecutter.project_slug}}/gulpfile.mjs

@@ -3,42 +3,47 @@
 ////////////////////////////////
 
 // Gulp and package
-const { src, dest, parallel, series, watch } = require('gulp');
-const pjson = require('./package.json');
+import { src, dest, parallel, series, task, watch } from 'gulp';
+import pjson from './package.json' with {type: 'json'};
 
 // Plugins
-const autoprefixer = require('autoprefixer');
-const browserSync = require('browser-sync').create();
-const concat = require('gulp-concat');
-const tildeImporter = require('node-sass-tilde-importer');
-const cssnano = require('cssnano');
-const imagemin = require('gulp-imagemin');
-const pixrem = require('pixrem');
-const plumber = require('gulp-plumber');
-const postcss = require('gulp-postcss');
+import autoprefixer from 'autoprefixer';
+import browserSyncLib from 'browser-sync';
+import concat from 'gulp-concat';
+import tildeImporter from 'node-sass-tilde-importer';
+import cssnano from 'cssnano';
+import imagemin from 'gulp-imagemin';
+import pixrem from 'pixrem';
+import plumber from 'gulp-plumber';
+import postcss from 'gulp-postcss';
+import rename from 'gulp-rename';
+import gulpSass from 'gulp-sass';
+import * as dartSass from 'sass';
+import gulUglifyES from 'gulp-uglify-es';
+import { spawn } from 'node:child_process';
+
+const browserSync = browserSyncLib.create();
 const reload = browserSync.reload;
-const rename = require('gulp-rename');
-const sass = require('gulp-sass')(require('sass'));
-const spawn = require('child_process').spawn;
-const uglify = require('gulp-uglify-es').default;
+const sass = gulpSass(dartSass);
+const uglify = gulUglifyES.default;
 
 // Relative paths function
-function pathsConfig(appName) {
-  this.app = `./${pjson.name}`;
+function pathsConfig() {
+  const appName = `./${pjson.name}`;
   const vendorsRoot = 'node_modules';
 
   return {
     vendorsJs: [
       `${vendorsRoot}/@popperjs/core/dist/umd/popper.js`,
       `${vendorsRoot}/bootstrap/dist/js/bootstrap.js`,
     ],
-    app: this.app,
-    templates: `${this.app}/templates`,
-    css: `${this.app}/static/css`,
-    sass: `${this.app}/static/sass`,
-    fonts: `${this.app}/static/fonts`,
-    images: `${this.app}/static/images`,
-    js: `${this.app}/static/js`,
+    app: appName,
+    templates: `${appName}/templates`,
+    css: `${appName}/static/css`,
+    sass: `${appName}/static/sass`,
+    fonts: `${appName}/static/fonts`,
+    images: `${appName}/static/images`,
+    js: `${appName}/static/js`,
   };
 }
 
@@ -163,7 +168,7 @@ function watchPaths() {
 }
 
 // Generate all assets
-const generateAssets = parallel(styles, scripts, vendorScripts, imgCompression);
+const build = parallel(styles, scripts, vendorScripts, imgCompression);
 
 // Set up dev environment
 {%- if cookiecutter.use_docker == 'n' %}
@@ -176,6 +181,6 @@ const dev = parallel(runServer, initBrowserSync, watchPaths);
 const dev = parallel(initBrowserSync, watchPaths);
 {%- endif %}
 
-exports.default = series(generateAssets, dev);
-exports['generate-assets'] = generateAssets;
-exports['dev'] = dev;
+task('default', series(build, dev));
+task('build', build);
+task('dev', dev);