Summary

Migrate Gulp build system to ES Modules and update gulp-prettier from v3.0.0 to v6.0.0.

Parent Issue

Closes part of #5364 #5369 (Remaining Dependency Updates)

Current State

• Current Version: gulp-prettier@3.0.0
• Target Version: gulp-prettier@6.0.0
• Current Module System: CommonJS (gulpfile.js)
• Blocker: gulp-prettier v6 requires ES Modules (ESM)

Motivation

• gulp-prettier v3 is outdated and no longer maintained
• v6 includes security updates and bug fixes
• ESM is the modern JavaScript module standard
• Better compatibility with modern tooling

Implementation Plan

Phase 1: Rename Gulpfile

mv gulpfile.js gulpfile.mjs

Why .mjs? The .mjs extension explicitly tells Node.js to treat the file as an ES Module, regardless of package.json settings.

Phase 2: Convert CommonJS to ESM

Before (CommonJS):

const gulp = require("gulp");
const { src, dest, watch, series, parallel } = gulp;
const sass = require("gulp-sass");
const concat = require("gulp-concat");
const uglify = require("gulp-uglify");
// ... etc

After (ESM):

import pkg from 'gulp';
const { src, dest, watch, series, parallel } = pkg;
import sourcemaps from "gulp-sourcemaps";
import dartSass from "sass";
import gulpSass from "gulp-sass";
const sass = gulpSass(dartSass);
import concat from "gulp-concat";
import uglify from "gulp-uglify";
import babel from "gulp-babel";
import postcss from "gulp-postcss";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";
import replace from "gulp-replace";
import minifyCSS from "gulp-clean-css";
import prettier from "gulp-prettier";

Key Changes:

1. require() → import
2. module.exports → export default
3. Some packages need destructuring adjustments

Phase 3: Update Export Syntax

Before:

exports.default = series(
  parallel(jsTask, cssTask, sassTask),
  prettify,
  cacheBustTask,
  validate,
  watchTask
);

After:

export default series(
  parallel(jsTask, cssTask, sassTask),
  prettify,
  cacheBustTask,
  validate,
  watchTask
);

Phase 4: Update gulp-prettier

npm install --save-dev gulp-prettier@^6.0.0

Phase 5: Verification

npx gulp

Expected Output:

[HH:MM:SS] Using gulpfile ~/musicblocks/gulpfile.mjs
[HH:MM:SS] Starting 'default'...
[HH:MM:SS] Starting 'jsTask'...
[HH:MM:SS] Starting 'cssTask'...
[HH:MM:SS] Starting 'sassTask'...
...
[HH:MM:SS] Finished 'default' after X s

Testing Checklist

• npx gulp runs without errors
• All Gulp tasks execute successfully:
  • jsTask - JavaScript concatenation and minification
  • cssTask - CSS minification
  • sassTask - SASS compilation
  • prettify - Code formatting
  • cacheBustTask - Cache busting
  • validate - Prettier validation
  • watchTask - File watching
• Output files are generated in dist/ directory
• No breaking changes in build output
• CI/CD pipeline passes

Files Modified

• gulpfile.js → gulpfile.mjs (renamed and converted)
• package.json - Update gulp-prettier version

Breaking Changes

None. The build output remains identical; only the internal module system changes.

Benefits

• ✅ Modern ES Module syntax
• ✅ Latest gulp-prettier with bug fixes
• ✅ Better IDE support and autocomplete
• ✅ Consistent with modern JavaScript standards
• ✅ Future-proof build system

Common Pitfalls to Avoid

1. Don't forget the .mjs extension - Required for ESM in Node.js
2. Import order matters - Some packages need to be imported before others
3. Default exports - Some packages export differently in ESM vs CommonJS

Compatibility Notes

• Node.js Version: Requires Node.js 14+ (already satisfied)
• Gulp Version: Works with Gulp 4.x and 5.x (currently using 5.0.1)
• Backward Compatibility: All existing Gulp tasks remain unchanged

References

• Gulp ESM Documentation
• Node.js ES Modules
• gulp-prettier v6 Release Notes

Contributor

@vanshika2720

Note for Reviewers: This is a straightforward module system migration. The build process and output remain identical—only the syntax changes.

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.