From 9424deb06ab7cccfdc6e750daa72bf4b8af7f9aa Mon Sep 17 00:00:00 2001
From: Christopher Allen <cpcallen+git@google.com>
Date: Mon, 30 Jun 2025 09:32:08 -0700
Subject: [PATCH] build: Refactor gulpfiles from CJS to ESM (#9149)

* refactor(build): Rename "package" gulp task (but not npm script) to "pack"

  This is to avoid an issue due to "package" being a reserved word
  in JavaScript, and therefore not a valid export identifier.

* refactor(build): Convert gulpfile.js from CJS to ESM.

* refactor(build): Convert scripts/gulpfiles/*.js from CJS to ESM

* fix(build): Fix eslint warning for @license tag in gulpfile.mjs

* chore(build): Remove unused imports

* fix(build): Fix incorrect import of gulp-gzip

* fix(build): Fix incorrect sourcemaps import reference
---
 eslint.config.mjs                             |  2 +-
 gulpfile.js                                   | 54 -----------
 gulpfile.mjs                                  | 95 +++++++++++++++++++
 package.json                                  |  2 +-
 ...appengine_tasks.js => appengine_tasks.mjs} | 31 +++---
 .../{build_tasks.js => build_tasks.mjs}       | 84 ++++++++--------
 scripts/gulpfiles/{config.js => config.mjs}   | 14 +--
 .../{docs_tasks.js => docs_tasks.mjs}         | 15 ++-
 .../gulpfiles/{git_tasks.js => git_tasks.mjs} | 34 ++-----
 scripts/gulpfiles/helper_tasks.js             | 19 ----
 scripts/gulpfiles/helper_tasks.mjs            | 25 +++++
 .../{package_tasks.js => package_tasks.mjs}   | 47 ++++-----
 .../{release_tasks.js => release_tasks.mjs}   | 37 +++-----
 .../{test_tasks.js => test_tasks.mjs}         | 30 +++---
 14 files changed, 251 insertions(+), 238 deletions(-)
 delete mode 100644 gulpfile.js
 create mode 100644 gulpfile.mjs
 rename scripts/gulpfiles/{appengine_tasks.js => appengine_tasks.mjs} (86%)
 rename scripts/gulpfiles/{build_tasks.js => build_tasks.mjs} (92%)
 rename scripts/gulpfiles/{config.js => config.mjs} (70%)
 rename scripts/gulpfiles/{docs_tasks.js => docs_tasks.mjs} (94%)
 rename scripts/gulpfiles/{git_tasks.js => git_tasks.mjs} (86%)
 delete mode 100644 scripts/gulpfiles/helper_tasks.js
 create mode 100644 scripts/gulpfiles/helper_tasks.mjs
 rename scripts/gulpfiles/{package_tasks.js => package_tasks.mjs} (89%)
 rename scripts/gulpfiles/{release_tasks.js => release_tasks.mjs} (87%)
 rename scripts/gulpfiles/{test_tasks.js => test_tasks.mjs} (94%)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 68f25133f..f018e525d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -184,7 +184,7 @@ export default [
     files: [
       'eslint.config.mjs',
       '.prettierrc.js',
-      'gulpfile.js',
+      'gulpfile.mjs',
       'scripts/helpers.js',
       'tests/mocha/.mocharc.js',
       'tests/migration/validate-renamings.mjs',
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index d2ad650c6..000000000
--- a/gulpfile.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Gulp script to build Blockly for Node & NPM.
- * Run this script by calling "npm install" in this directory.
- */
-/* eslint-env node */
-
-const gulp = require('gulp');
-
-const buildTasks = require('./scripts/gulpfiles/build_tasks');
-const packageTasks = require('./scripts/gulpfiles/package_tasks');
-const gitTasks = require('./scripts/gulpfiles/git_tasks');
-const appengineTasks = require('./scripts/gulpfiles/appengine_tasks');
-const releaseTasks = require('./scripts/gulpfiles/release_tasks');
-const docsTasks = require('./scripts/gulpfiles/docs_tasks');
-const testTasks = require('./scripts/gulpfiles/test_tasks');
-
-module.exports = {
-  // Default target if gulp invoked without specifying.
-  default: buildTasks.build,
-
-  // Main sequence targets.  They already invoke prerequisites.
-  langfiles: buildTasks.langfiles, // Build build/msg/*.js from msg/json/*.
-  tsc: buildTasks.tsc,
-  deps: buildTasks.deps,
-  minify: buildTasks.minify,
-  build: buildTasks.build,
-  package: packageTasks.package,
-  publish: releaseTasks.publish,
-  publishBeta: releaseTasks.publishBeta,
-  prepareDemos: appengineTasks.prepareDemos,
-  deployDemos: appengineTasks.deployDemos,
-  deployDemosBeta: appengineTasks.deployDemosBeta,
-  gitUpdateGithubPages: gitTasks.updateGithubPages,
-
-  // Manually-invokable targets, with prerequisites where required.
-  messages: buildTasks.messages, // Generate msg/json/en.json et al.
-  clean: gulp.parallel(buildTasks.cleanBuildDir, packageTasks.cleanReleaseDir),
-  test: testTasks.test,
-  testGenerators: testTasks.generators,
-  buildAdvancedCompilationTest: buildTasks.buildAdvancedCompilationTest,
-  gitCreateRC: gitTasks.createRC,
-  docs: docsTasks.docs,
-
-  // Legacy targets, to be deleted.
-  recompile: releaseTasks.recompile,
-  gitSyncDevelop: gitTasks.syncDevelop,
-  gitSyncMaster: gitTasks.syncMaster,
-};
diff --git a/gulpfile.mjs b/gulpfile.mjs
new file mode 100644
index 000000000..fd3de3bde
--- /dev/null
+++ b/gulpfile.mjs
@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Gulp script to build Blockly for Node & NPM.
+ * Run this script by calling "npm install" in this directory.
+ */
+/* eslint-env node */
+
+// Needed to prevent prettier from munging exports order, due to
+// https://github.com/simonhaenisch/prettier-plugin-organize-imports/issues/146
+// - but has the unfortunate side effect of suppressing ordering of
+// imports too:
+//
+// organize-imports-ignore
+
+import {parallel} from 'gulp';
+import {
+  deployDemos,
+  deployDemosBeta,
+  prepareDemos,
+} from './scripts/gulpfiles/appengine_tasks.mjs';
+import {
+  build,
+  buildAdvancedCompilationTest,
+  cleanBuildDir,
+  langfiles,
+  messages,
+  minify,
+  tsc,
+} from './scripts/gulpfiles/build_tasks.mjs';
+import {docs} from './scripts/gulpfiles/docs_tasks.mjs';
+import {
+  createRC,
+  syncDevelop,
+  syncMaster,
+  updateGithubPages,
+} from './scripts/gulpfiles/git_tasks.mjs';
+import {cleanReleaseDir, pack} from './scripts/gulpfiles/package_tasks.mjs';
+import {
+  publish,
+  publishBeta,
+  recompile,
+} from './scripts/gulpfiles/release_tasks.mjs';
+import {generators, test} from './scripts/gulpfiles/test_tasks.mjs';
+
+const clean = parallel(cleanBuildDir, cleanReleaseDir);
+
+// Default target if gulp invoked without specifying.
+export default build;
+
+// Main sequence targets.  They already invoke prerequisites.  Listed
+// in typical order of invocation, and strictly listing prerequisites
+// before dependants.
+//
+// prettier-ignore
+export {
+  langfiles,
+  tsc,
+  minify,
+  build,
+  pack,  // Formerly package.
+  publishBeta,
+  publish,
+  prepareDemos,
+  deployDemosBeta,
+  deployDemos,
+  updateGithubPages as gitUpdateGithubPages,
+}
+
+// Manually-invokable targets that also invoke prerequisites where
+// required.
+//
+// prettier-ignore
+export {
+  messages, // Generate msg/json/en.json et al.
+  clean,
+  test,
+  generators as testGenerators,
+  buildAdvancedCompilationTest,
+  createRC as gitCreateRC,
+  docs,
+}
+
+// Legacy targets, to be deleted.
+//
+// prettier-ignore
+export {
+  recompile,
+  syncDevelop as gitSyncDevelop,
+  syncMaster as gitSyncMaster,
+}
diff --git a/package.json b/package.json
index c4e83340d..6ed5e4ea4 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "lint:fix": "eslint . --fix",
     "langfiles": "gulp langfiles",
     "minify": "gulp minify",
-    "package": "gulp package",
+    "package": "gulp pack",
     "postinstall": "patch-package",
     "prepareDemos": "gulp prepareDemos",
     "publish": "npm ci && gulp publish",
diff --git a/scripts/gulpfiles/appengine_tasks.js b/scripts/gulpfiles/appengine_tasks.mjs
similarity index 86%
rename from scripts/gulpfiles/appengine_tasks.js
rename to scripts/gulpfiles/appengine_tasks.mjs
index ddbd2f45f..754534383 100644
--- a/scripts/gulpfiles/appengine_tasks.js
+++ b/scripts/gulpfiles/appengine_tasks.mjs
@@ -8,16 +8,16 @@
  * @fileoverview Gulp script to deploy Blockly demos on appengine.
  */
 
-const gulp = require('gulp');
+import * as gulp from 'gulp';
 
-const fs = require('fs');
-const path = require('path');
-const execSync = require('child_process').execSync;
-const buildTasks = require('./build_tasks.js');
-const packageTasks = require('./package_tasks.js');
-const {rimraf} = require('rimraf');
+import * as fs from 'fs';
+import * as path from 'path';
+import {execSync} from 'child_process';
+import * as buildTasks from './build_tasks.mjs';
+import {getPackageJson} from './helper_tasks.mjs';
+import * as packageTasks from './package_tasks.mjs';
+import {rimraf} from 'rimraf';
 
-const packageJson = require('../../package.json');
 const demoTmpDir = '../_deploy';
 const demoStaticTmpDir = '../_deploy/static';
 
@@ -123,7 +123,7 @@ function deployToAndClean(demoVersion) {
  */
 function getDemosVersion() {
   // Replace all '.' with '-' e.g. 9-3-3-beta-2
-  return packageJson.version.replace(/\./g, '-');
+  return getPackageJson().version.replace(/\./g, '-');
 }
 
 /**
@@ -162,7 +162,7 @@ function deployBetaAndClean(done) {
  *
  * Prerequisites (invoked): clean, build
  */
-const prepareDemos = gulp.series(
+export const prepareDemos = gulp.series(
     prepareDeployDir,
     gulp.parallel(
         gulp.series(
@@ -180,16 +180,9 @@ const prepareDemos = gulp.series(
 /**
  * Deploys demos.
  */
-const deployDemos = gulp.series(prepareDemos, deployAndClean);
+export const deployDemos = gulp.series(prepareDemos, deployAndClean);
 
 /**
  * Deploys beta version of demos (version appended with -beta).
  */
-const deployDemosBeta = gulp.series(prepareDemos, deployBetaAndClean);
-
-module.exports = {
-  // Main sequence targets.  Each should invoke any immediate prerequisite(s).
-  deployDemos: deployDemos,
-  deployDemosBeta: deployDemosBeta,
-  prepareDemos: prepareDemos
-};
+export const deployDemosBeta = gulp.series(prepareDemos, deployBetaAndClean);
diff --git a/scripts/gulpfiles/build_tasks.js b/scripts/gulpfiles/build_tasks.mjs
similarity index 92%
rename from scripts/gulpfiles/build_tasks.js
rename to scripts/gulpfiles/build_tasks.mjs
index a00c1b17d..669e73258 100644
--- a/scripts/gulpfiles/build_tasks.js
+++ b/scripts/gulpfiles/build_tasks.mjs
@@ -8,25 +8,32 @@
  * @fileoverview Gulp script to build Blockly for Node & NPM.
  */
 
-const gulp = require('gulp');
-gulp.replace = require('gulp-replace');
-gulp.rename = require('gulp-rename');
-gulp.sourcemaps = require('gulp-sourcemaps');
+import * as gulp from 'gulp';
+import replace from 'gulp-replace';
+import rename from 'gulp-rename';
+import sourcemaps from 'gulp-sourcemaps';
 
-const path = require('path');
-const fs = require('fs');
-const fsPromises = require('fs/promises');
-const {exec, execSync} = require('child_process');
+import * as path from 'path';
+import * as fs from 'fs';
+import * as fsPromises from 'fs/promises';
+import {exec, execSync} from 'child_process';
 
-const {globSync} = require('glob');
-const closureCompiler = require('google-closure-compiler').gulp();
-const argv = require('yargs').argv;
-const {rimraf} = require('rimraf');
+import {globSync} from 'glob';
+// For v20250609.0.0 and later:
+// import {gulp as closureCompiler} from 'google-closure-compiler';
+import ClosureCompiler from 'google-closure-compiler';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
+import {rimraf} from 'rimraf';
 
-const {BUILD_DIR, LANG_BUILD_DIR, RELEASE_DIR, TSC_OUTPUT_DIR, TYPINGS_BUILD_DIR} = require('./config');
-const {getPackageJson} = require('./helper_tasks');
+import {BUILD_DIR, LANG_BUILD_DIR, RELEASE_DIR, TSC_OUTPUT_DIR, TYPINGS_BUILD_DIR} from './config.mjs';
+import {getPackageJson} from './helper_tasks.mjs';
 
-const {posixPath, quote} = require('../helpers');
+import {posixPath, quote} from '../helpers.js';
+
+const closureCompiler = ClosureCompiler.gulp();
+
+const argv = yargs(hideBin(process.argv)).parse();
 
 ////////////////////////////////////////////////////////////
 //                        Build                           //
@@ -182,7 +189,7 @@ function stripApacheLicense() {
   // Closure Compiler preserves dozens of Apache licences in the Blockly code.
   // Remove these if they belong to Google or MIT.
   // MIT's permission to do this is logged in Blockly issue #2412.
-  return gulp.replace(new RegExp(licenseRegex, 'g'), '\n\n\n\n');
+  return replace(new RegExp(licenseRegex, 'g'), '\n\n\n\n');
   // Replace with the same number of lines so that source-maps are not affected.
 }
 
@@ -306,7 +313,7 @@ const JSCOMP_OFF = [
  * Builds Blockly as a JS program, by running tsc on all the files in
  * the core directory.
  */
-function buildJavaScript(done) {
+export function tsc(done) {
   execSync(
       `tsc -outDir "${TSC_OUTPUT_DIR}" -declarationDir "${TYPINGS_BUILD_DIR}"`,
       {stdio: 'inherit'});
@@ -318,7 +325,7 @@ function buildJavaScript(done) {
  * This task regenerates msg/json/en.js and msg/json/qqq.js from
  * msg/messages.js.
  */
-function generateMessages(done) {
+export function messages(done) {
   // Run js_to_json.py
   const jsToJsonCmd = `${PYTHON} scripts/i18n/js_to_json.py \
       --input_file ${path.join('msg', 'messages.js')} \
@@ -573,10 +580,10 @@ function buildCompiled() {
   // Fire up compilation pipline.
   return gulp.src(chunkOptions.js, {base: './'})
       .pipe(stripApacheLicense())
-      .pipe(gulp.sourcemaps.init())
+      .pipe(sourcemaps.init())
       .pipe(compile(options))
-      .pipe(gulp.rename({suffix: COMPILED_SUFFIX}))
-      .pipe(gulp.sourcemaps.write('.'))
+      .pipe(rename({suffix: COMPILED_SUFFIX}))
+      .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest(RELEASE_DIR));
 }
 
@@ -668,7 +675,7 @@ async function buildLangfileShims() {
   // (We have to do it this way because messages.js is a script and
   // not a CJS module with exports.)
   globalThis.Blockly = {Msg: {}};
-  require('../../msg/messages.js');
+  await import('../../msg/messages.js');
   const exportedNames = Object.keys(globalThis.Blockly.Msg);
   delete globalThis.Blockly;
 
@@ -689,12 +696,14 @@ ${exportedNames.map((name) => `  ${name},`).join('\n')}
 }
 
 /**
- * This task builds Blockly core, blocks and generators together and uses
- * Closure Compiler's ADVANCED_COMPILATION mode.
+ * This task uses Closure Compiler's ADVANCED_COMPILATION mode to
+ * compile together Blockly core, blocks and generators with a simple
+ * test app; the purpose is to verify that Blockly is compatible with
+ * the ADVANCED_COMPILATION mode.
  *
  * Prerequisite: buildJavaScript.
  */
-function buildAdvancedCompilationTest() {
+function compileAdvancedCompilationTest() {
   // If main_compressed.js exists (from a previous run) delete it so that
   // a later browser-based test won't check it should the compile fail.
   try {
@@ -718,9 +727,9 @@ function buildAdvancedCompilationTest() {
   };
   return gulp.src(srcs, {base: './'})
       .pipe(stripApacheLicense())
-      .pipe(gulp.sourcemaps.init())
+      .pipe(sourcemaps.init())
       .pipe(compile(options))
-      .pipe(gulp.sourcemaps.write(
+      .pipe(sourcemaps.write(
           '.', {includeContent: false, sourceRoot: '../../'}))
       .pipe(gulp.dest('./tests/compile/'));
 }
@@ -728,7 +737,7 @@ function buildAdvancedCompilationTest() {
 /**
  * This task cleans the build directory (by deleting it).
  */
-function cleanBuildDir() {
+export function cleanBuildDir() {
   // Sanity check.
   if (BUILD_DIR === '.' || BUILD_DIR === '/') {
     return Promise.reject(`Refusing to rm -rf ${BUILD_DIR}`);
@@ -737,16 +746,13 @@ function cleanBuildDir() {
 }
 
 // Main sequence targets.  Each should invoke any immediate prerequisite(s).
-exports.cleanBuildDir = cleanBuildDir;
-exports.langfiles = gulp.parallel(buildLangfiles, buildLangfileShims);
-exports.tsc = buildJavaScript;
-exports.minify = gulp.series(exports.tsc, buildCompiled, buildShims);
-exports.build = gulp.parallel(exports.minify, exports.langfiles);
+// function cleanBuildDir, above
+export const langfiles = gulp.parallel(buildLangfiles, buildLangfileShims);
+export const minify = gulp.series(tsc, buildCompiled, buildShims);
+// function tsc, above
+export const build = gulp.parallel(minify, langfiles);
 
 // Manually-invokable targets, with prerequisites where required.
-exports.messages = generateMessages;  // Generate msg/json/en.json et al.
-exports.buildAdvancedCompilationTest =
-    gulp.series(exports.tsc, buildAdvancedCompilationTest);
-
-// Targets intended only for invocation by scripts; may omit prerequisites.
-exports.onlyBuildAdvancedCompilationTest = buildAdvancedCompilationTest;
+// function messages, above
+export const buildAdvancedCompilationTest =
+    gulp.series(tsc, compileAdvancedCompilationTest);
diff --git a/scripts/gulpfiles/config.js b/scripts/gulpfiles/config.mjs
similarity index 70%
rename from scripts/gulpfiles/config.js
rename to scripts/gulpfiles/config.mjs
index 90cd57109..52e4cd06f 100644
--- a/scripts/gulpfiles/config.js
+++ b/scripts/gulpfiles/config.mjs
@@ -8,7 +8,7 @@
  * @fileoverview Common configuration for Gulp scripts.
  */
 
-const path = require('path');
+import * as path from 'path';
 
 // Paths are all relative to the repository root.  Do not include
 // trailing slash.
@@ -21,21 +21,21 @@ const path = require('path');
 // - tests/scripts/update_metadata.sh
 
 // Directory to write compiled output to.
-exports.BUILD_DIR = 'build';
+export const BUILD_DIR = 'build';
 
 // Directory to write typings output to.
-exports.TYPINGS_BUILD_DIR = path.join(exports.BUILD_DIR, 'declarations');
+export const TYPINGS_BUILD_DIR = path.join(BUILD_DIR, 'declarations');
 
 // Directory to write langfile output to.
-exports.LANG_BUILD_DIR = path.join(exports.BUILD_DIR, 'msg');
+export const LANG_BUILD_DIR = path.join(BUILD_DIR, 'msg');
 
 // Directory where typescript compiler output can be found.
 // Matches the value in tsconfig.json: outDir
-exports.TSC_OUTPUT_DIR = path.join(exports.BUILD_DIR, 'src');
+export const TSC_OUTPUT_DIR = path.join(BUILD_DIR, 'src');
 
 // Directory for files generated by compiling test code.
-exports.TEST_TSC_OUTPUT_DIR = path.join(exports.BUILD_DIR, 'tests');
+export const TEST_TSC_OUTPUT_DIR = path.join(BUILD_DIR, 'tests');
 
 // Directory in which to assemble (and from which to publish) the
 // blockly npm package.
-exports.RELEASE_DIR = 'dist';
+export const RELEASE_DIR = 'dist';
diff --git a/scripts/gulpfiles/docs_tasks.js b/scripts/gulpfiles/docs_tasks.mjs
similarity index 94%
rename from scripts/gulpfiles/docs_tasks.js
rename to scripts/gulpfiles/docs_tasks.mjs
index 8820a586f..63fdbe665 100644
--- a/scripts/gulpfiles/docs_tasks.js
+++ b/scripts/gulpfiles/docs_tasks.mjs
@@ -1,9 +1,9 @@
-const {execSync} = require('child_process');
-const {Extractor} = require('markdown-tables-to-json');
-const fs = require('fs');
-const gulp = require('gulp');
-const header = require('gulp-header');
-const replace = require('gulp-replace');
+import {execSync} from 'child_process';
+import {Extractor} from 'markdown-tables-to-json';
+import * as fs from 'fs';
+import * as gulp from 'gulp';
+import * as header from 'gulp-header';
+import * as replace from 'gulp-replace';
 
 const DOCS_DIR = 'docs';
 
@@ -140,8 +140,7 @@ const createToc = function(done) {
   done();
 }
 
-const docs = gulp.series(
+export const docs = gulp.series(
     generateApiJson, removeRenames, generateDocs,
     gulp.parallel(prependBook, createToc));
 
-module.exports = {docs};
diff --git a/scripts/gulpfiles/git_tasks.js b/scripts/gulpfiles/git_tasks.mjs
similarity index 86%
rename from scripts/gulpfiles/git_tasks.js
rename to scripts/gulpfiles/git_tasks.mjs
index 7c320cd87..2b08e16b3 100644
--- a/scripts/gulpfiles/git_tasks.js
+++ b/scripts/gulpfiles/git_tasks.mjs
@@ -8,11 +8,11 @@
  * @fileoverview Git-related gulp tasks for Blockly.
  */
 
-const gulp = require('gulp');
-const execSync = require('child_process').execSync;
+import * as gulp from 'gulp';
+import {execSync} from 'child_process';
 
-const buildTasks = require('./build_tasks');
-const packageTasks = require('./package_tasks');
+import * as buildTasks from './build_tasks.mjs';
+import * as packageTasks from './package_tasks.mjs';
 
 const UPSTREAM_URL = 'https://github.com/google/blockly.git';
 
@@ -63,7 +63,7 @@ function syncBranch(branchName) {
  * Stash current state, check out develop, and sync with
  * google/blockly.
  */
-function syncDevelop() {
+export function syncDevelop() {
   return syncBranch('develop');
 };
 
@@ -71,7 +71,7 @@ function syncDevelop() {
  * Stash current state, check out master, and sync with
  * google/blockly.
  */
-function syncMaster() {
+export function syncMaster() {
   return syncBranch('master');
 };
 
@@ -111,7 +111,7 @@ function checkoutBranch(branchName) {
  * Create and push an RC branch.
  * Note that this pushes to google/blockly.
  */
-const createRC = gulp.series(
+export const createRC = gulp.series(
   syncDevelop(),
   function(done) {
     const branchName = getRCBranchName();
@@ -122,7 +122,7 @@ const createRC = gulp.series(
 );
 
 /** Create the rebuild branch. */
-function createRebuildBranch(done) {
+export function createRebuildBranch(done) {
   const branchName = getRebuildBranchName();
   console.log(`make-rebuild-branch: creating branch ${branchName}`);
   execSync(`git switch -C ${branchName}`, { stdio: 'inherit' });
@@ -130,7 +130,7 @@ function createRebuildBranch(done) {
 }
 
 /** Push the rebuild branch to origin. */
-function pushRebuildBranch(done) {
+export function pushRebuildBranch(done) {
   console.log('push-rebuild-branch: committing rebuild');
   execSync('git commit -am "Rebuild"', { stdio: 'inherit' });
   const branchName = getRebuildBranchName();
@@ -145,7 +145,7 @@ function pushRebuildBranch(done) {
  *
  * Prerequisites (invoked): clean, build.
  */
-const updateGithubPages = gulp.series(
+export const updateGithubPages = gulp.series(
   function(done) {
     execSync('git stash save -m "Stash for sync"', { stdio: 'inherit' });
     execSync('git switch -C gh-pages', { stdio: 'inherit' });
@@ -165,17 +165,3 @@ const updateGithubPages = gulp.series(
     done();
   }
 );
-
-module.exports = {
-  // Main sequence targets.  Each should invoke any immediate prerequisite(s).
-  updateGithubPages,
-
-  // Manually-invokable targets that invoke prerequisites.
-  createRC,
-
-  // Legacy script-only targets, to be deleted.
-  syncDevelop,
-  syncMaster,
-  createRebuildBranch,
-  pushRebuildBranch,
-};
diff --git a/scripts/gulpfiles/helper_tasks.js b/scripts/gulpfiles/helper_tasks.js
deleted file mode 100644
index b239d03f5..000000000
--- a/scripts/gulpfiles/helper_tasks.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Any gulp helper functions.
- */
-
-// Clears the require cache to ensure the package.json is up to date.
-function getPackageJson() {
-  delete require.cache[require.resolve('../../package.json')]
-  return require('../../package.json');
-}
-
-module.exports = {
-  getPackageJson: getPackageJson
-}
diff --git a/scripts/gulpfiles/helper_tasks.mjs b/scripts/gulpfiles/helper_tasks.mjs
new file mode 100644
index 000000000..2068de106
--- /dev/null
+++ b/scripts/gulpfiles/helper_tasks.mjs
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Any gulp helper functions.
+ */
+
+import Module from "node:module";
+
+const require = Module.createRequire(import.meta.url);
+
+/**
+ * Load and return the contents of package.json.
+ *
+ * Uses require() rather than import, and clears the require cache, to
+ * ensure the loaded package.json data is up to date.
+ */
+export function getPackageJson() {
+  delete require.cache[require.resolve('../../package.json')];
+  return require('../../package.json');
+}
+
diff --git a/scripts/gulpfiles/package_tasks.js b/scripts/gulpfiles/package_tasks.mjs
similarity index 89%
rename from scripts/gulpfiles/package_tasks.js
rename to scripts/gulpfiles/package_tasks.mjs
index 89264a0e3..948f855b0 100644
--- a/scripts/gulpfiles/package_tasks.js
+++ b/scripts/gulpfiles/package_tasks.mjs
@@ -8,20 +8,17 @@
  * @fileoverview Gulp tasks to package Blockly for distribution on NPM.
  */
 
-const gulp = require('gulp');
-gulp.concat = require('gulp-concat');
-gulp.replace = require('gulp-replace');
-gulp.rename = require('gulp-rename');
-gulp.insert = require('gulp-insert');
-gulp.umd = require('gulp-umd');
-gulp.replace = require('gulp-replace');
+import * as gulp from 'gulp';
+import concat from 'gulp-concat';
+import replace from 'gulp-replace';
+import umd from 'gulp-umd';
 
-const path = require('path');
-const fs = require('fs');
-const {rimraf} = require('rimraf');
-const build = require('./build_tasks');
-const {getPackageJson} = require('./helper_tasks');
-const {BUILD_DIR, LANG_BUILD_DIR, RELEASE_DIR, TYPINGS_BUILD_DIR} = require('./config');
+import * as path from 'path';
+import * as fs from 'fs';
+import {rimraf} from 'rimraf';
+import * as build from './build_tasks.mjs';
+import {getPackageJson} from './helper_tasks.mjs';
+import {BUILD_DIR, LANG_BUILD_DIR, RELEASE_DIR, TYPINGS_BUILD_DIR} from './config.mjs';
 
 // Path to template files for gulp-umd.
 const TEMPLATE_DIR = 'scripts/package/templates';
@@ -32,7 +29,7 @@ const TEMPLATE_DIR = 'scripts/package/templates';
  * @param {Array<Object>} dependencies An array of dependencies to inject.
  */
 function packageUMD(namespace, dependencies, template = 'umd.template') {
-  return gulp.umd({
+  return umd({
     dependencies: function () { return dependencies; },
     namespace: function () { return namespace; },
     exports: function () { return namespace; },
@@ -88,7 +85,7 @@ function packageCoreNode() {
 function packageLocales() {
   // Remove references to goog.provide and goog.require.
   return gulp.src(`${LANG_BUILD_DIR}/*.js`)
-      .pipe(gulp.replace(/goog\.[^\n]+/g, ''))
+      .pipe(replace(/goog\.[^\n]+/g, ''))
       .pipe(packageUMD('Blockly.Msg', [], 'umd-msg.template'))
       .pipe(gulp.dest(`${RELEASE_DIR}/msg`));
 };
@@ -107,7 +104,7 @@ function packageUMDBundle() {
     `${RELEASE_DIR}/javascript_compressed.js`,
   ];
   return gulp.src(srcs)
-      .pipe(gulp.concat('blockly.min.js'))
+      .pipe(concat('blockly.min.js'))
       .pipe(gulp.dest(`${RELEASE_DIR}`));
 };
 
@@ -140,7 +137,7 @@ function packageUMDBundle() {
  * @param {Function} done Callback to call when done.
  */
 function packageLegacyEntrypoints(done) {
-  for (entrypoint of [
+  for (const entrypoint of [
     'core', 'blocks', 'dart', 'javascript', 'lua', 'php', 'python'
   ]) {
     const bundle =
@@ -218,14 +215,14 @@ function packageDTS() {
       .pipe(gulp.src(`${TYPINGS_BUILD_DIR}/**/*.d.ts`, {ignore: [
 	`${TYPINGS_BUILD_DIR}/blocks/**/*`,
       ]}))
-      .pipe(gulp.replace('AnyDuringMigration', 'any'))
+      .pipe(replace('AnyDuringMigration', 'any'))
       .pipe(gulp.dest(RELEASE_DIR));
 };
 
 /**
  * This task cleans the release directory (by deleting it).
  */
-function cleanReleaseDir() {
+export function cleanReleaseDir() {
   // Sanity check.
   if (RELEASE_DIR === '.' || RELEASE_DIR === '/') {
     return Promise.reject(`Refusing to rm -rf ${RELEASE_DIR}`);
@@ -237,9 +234,13 @@ function cleanReleaseDir() {
  * This task prepares the files to be included in the NPM by copying
  * them into the release directory.
  *
+ * This task was formerly called "package" but was renamed in
+ * preparation for porting gulpfiles to ESM because "package" is a
+ * reserved word.
+ *
  * Prerequisite: build.
  */
-const package = gulp.series(
+export const pack = gulp.series(
     gulp.parallel(
         build.cleanBuildDir,
         cleanReleaseDir),
@@ -254,9 +255,3 @@ const package = gulp.series(
         packageReadme,
         packageDTS)
     );
-
-module.exports = {
-  // Main sequence targets.  Each should invoke any immediate prerequisite(s).
-  cleanReleaseDir: cleanReleaseDir,
-  package: package,
-};
diff --git a/scripts/gulpfiles/release_tasks.js b/scripts/gulpfiles/release_tasks.mjs
similarity index 87%
rename from scripts/gulpfiles/release_tasks.js
rename to scripts/gulpfiles/release_tasks.mjs
index f2545c7b9..a678a4f24 100644
--- a/scripts/gulpfiles/release_tasks.js
+++ b/scripts/gulpfiles/release_tasks.mjs
@@ -8,15 +8,15 @@
  * @fileoverview Gulp scripts for releasing Blockly.
  */
 
-const execSync = require('child_process').execSync;
-const fs = require('fs');
-const gulp = require('gulp');
-const readlineSync = require('readline-sync');
+import {execSync} from 'child_process';
+import * as fs from 'fs';
+import * as gulp from 'gulp';
+import * as readlineSync from 'readline-sync';
 
-const gitTasks = require('./git_tasks');
-const packageTasks = require('./package_tasks');
-const {getPackageJson} = require('./helper_tasks');
-const {RELEASE_DIR} = require('./config');
+import * as gitTasks from './git_tasks.mjs';
+import * as packageTasks from './package_tasks.mjs';
+import {getPackageJson} from './helper_tasks.mjs';
+import {RELEASE_DIR} from './config.mjs';
 
 
 // Gets the current major version.
@@ -147,17 +147,17 @@ function updateBetaVersion(done) {
 }
 
 // Rebuild, package and publish to npm.
-const publish = gulp.series(
-  packageTasks.package,  // Does clean + build.
+export const publish = gulp.series(
+  packageTasks.pack,  // Does clean + build.
   checkBranch,
   checkReleaseDir,
   loginAndPublish
 );
 
 // Rebuild, package and publish a beta version of Blockly.
-const publishBeta = gulp.series(
+export const publishBeta = gulp.series(
   updateBetaVersion,
-  packageTasks.package,  // Does clean + build.
+  packageTasks.pack,  // Does clean + build.
   checkBranch,
   checkReleaseDir,
   loginAndPublishBeta
@@ -165,19 +165,10 @@ const publishBeta = gulp.series(
 
 // Switch to a new branch, update the version number, build Blockly
 // and check in the resulting built files.
-const recompileDevelop = gulp.series(
+export const recompile = gulp.series(
   gitTasks.syncDevelop(),
   gitTasks.createRebuildBranch,
   updateVersionPrompt,
-  packageTasks.package,  // Does clean + build.
+  packageTasks.pack,  // Does clean + build.
   gitTasks.pushRebuildBranch
   );
-
-module.exports = {
-  // Main sequence targets.  Each should invoke any immediate prerequisite(s).
-  publishBeta,
-  publish,
-
-  // Legacy target, to be deleted.
-  recompile: recompileDevelop,
-};
diff --git a/scripts/gulpfiles/test_tasks.js b/scripts/gulpfiles/test_tasks.mjs
similarity index 94%
rename from scripts/gulpfiles/test_tasks.js
rename to scripts/gulpfiles/test_tasks.mjs
index 236a21d77..d4b73cdb3 100644
--- a/scripts/gulpfiles/test_tasks.js
+++ b/scripts/gulpfiles/test_tasks.mjs
@@ -9,19 +9,19 @@
  */
 /* eslint-env node */
 
-const asyncDone = require('async-done');
-const gulp = require('gulp');
-const gzip = require('gulp-gzip');
-const fs = require('fs');
-const path = require('path');
-const {execSync} = require('child_process');
-const {rimraf} = require('rimraf');
+import asyncDone from 'async-done';
+import * as gulp from 'gulp';
+import gzip from 'gulp-gzip';
+import * as fs from 'fs';
+import * as path from 'path';
+import {execSync} from 'child_process';
+import {rimraf} from 'rimraf';
 
-const {RELEASE_DIR, TEST_TSC_OUTPUT_DIR} = require('./config');
+import {RELEASE_DIR, TEST_TSC_OUTPUT_DIR} from './config.mjs';
 
-const {runMochaTestsInBrowser} = require('../../tests/mocha/webdriver.js');
-const {runGeneratorsInBrowser} = require('../../tests/generators/webdriver.js');
-const {runCompileCheckInBrowser} = require('../../tests/compile/webdriver.js');
+import {runMochaTestsInBrowser} from '../../tests/mocha/webdriver.js';
+import {runGeneratorsInBrowser} from '../../tests/generators/webdriver.js';
+import {runCompileCheckInBrowser} from '../../tests/compile/webdriver.js';
 
 const OUTPUT_DIR = 'build/generators';
 const GOLDEN_DIR = 'tests/generators/golden';
@@ -321,7 +321,7 @@ function checkResult(suffix) {
  * Run generator tests inside a browser and check the results.
  * @return {Promise} Asynchronous result.
  */
-async function generators() {
+export async function generators() {
   return runTestTask('generators', async () => {
     // Clean up.
     rimraf.sync(OUTPUT_DIR);
@@ -396,10 +396,6 @@ const tasks = [
   advancedCompileInBrowser
 ];
 
-const test = gulp.series(...tasks, reportTestResult);
+export const test = gulp.series(...tasks, reportTestResult);
 
 
-module.exports = {
-  test,
-  generators,
-};