{"id":16372,"library":"gulp-pre","title":"Gulp","description":"Gulp is a popular, open-source streaming build system for automating time-consuming development tasks, primarily in web development. It leverages Node.js streams to process files in memory, which often results in faster build times compared to tools that write intermediate files to disk. The current stable version is 5.0.1. Gulp differentiates itself from alternatives like Grunt by favoring a 'code-over-configuration' approach, allowing developers to define tasks using standard JavaScript functions and Node.js APIs, offering greater flexibility and direct control over the build process. It boasts a strong ecosystem with thousands of plugins available via npm to handle various file transformations and manipulations. Its platform-agnostic nature makes it suitable for projects across different languages and environments.","status":"active","version":"4.0.0-alpha.5","language":"javascript","source_language":"en","source_url":"https://github.com/mgcrea/gulp","tags":["javascript"],"install":[{"cmd":"npm install gulp-pre","lang":"bash","label":"npm"},{"cmd":"yarn add gulp-pre","lang":"bash","label":"yarn"},{"cmd":"pnpm add gulp-pre","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Commonly used for cleaning build directories, and recommended directly in Gulp's documentation for file deletion. It is not a Gulp plugin itself but a vanilla Node.js module.","package":"del","optional":false},{"reason":"The command-line interface for Gulp. It's typically installed globally (`npm install -g gulp-cli`) and is required to run Gulp locally installed in a project.","package":"gulp-cli","optional":false}],"imports":[{"note":"CommonJS `require` is the traditional method for `gulpfile.js`. While Gulp supports ESM, the default export pattern for the main `gulp` object is recommended before destructuring its APIs.","wrong":"import gulp from 'gulp';","symbol":"gulp","correct":"const gulp = require('gulp');"},{"note":"For ES Modules (`.mjs` or `type: \"module\"`), import the default `gulp` object first, then destructure its APIs. Direct named imports for these core APIs are not consistently supported from the `gulp` package itself due to its hybrid CJS/ESM nature.","wrong":"import { src, dest, series, parallel } from 'gulp';","symbol":"{ src, dest, series, parallel }","correct":"import gulp from 'gulp';\nconst { src, dest, series, parallel } = gulp;"},{"note":"Most Gulp plugins are still distributed as CommonJS modules. Use `require` unless the plugin explicitly states ESM support. For ESM, `import plugin from 'gulp-plugin';` is the usual pattern.","wrong":"import coffee from 'gulp-coffee';","symbol":"coffee","correct":"const coffee = require('gulp-coffee');"}],"quickstart":{"code":"var gulp = require('gulp');\nvar coffee = require('gulp-coffee');\nvar concat = require('gulp-concat');\nvar uglify = require('gulp-uglify');\nvar imagemin = require('gulp-imagemin');\nvar sourcemaps = require('gulp-sourcemaps');\nvar del = require('del'); // A separate npm package for deleting files\n\nvar paths = {\n  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],\n  images: 'client/img/**/*'\n};\n\n// Clean the build directory\nfunction clean() {\n  return del(['build']);\n}\n\n// Optimize images\nfunction images() {\n  return gulp.src(paths.images)\n    .pipe(imagemin({ optimizationLevel: 5 }))\n    .pipe(gulp.dest('build/img'));\n}\n\n// Compile CoffeeScript, minify, concat, and add sourcemaps\nfunction scripts() {\n  return gulp.src(paths.scripts)\n    .pipe(sourcemaps.init())\n    .pipe(coffee())\n    .pipe(uglify())\n    .pipe(concat('all.min.js'))\n    .pipe(sourcemaps.write())\n    .pipe(gulp.dest('build/js'));\n}\n\n// Watch for file changes and re-run tasks\nfunction watch() {\n  gulp.watch(paths.scripts, scripts);\n  gulp.watch(paths.images, images);\n}\n\n// Define main build task: clean, then run scripts and images in parallel\ngulp.task('build', gulp.series(\n  clean,\n  gulp.parallel(scripts, images)\n));\n\n// Expose individual tasks for CLI if needed\ngulp.task(clean);\ngulp.task(watch);\n\n// Default task runs the 'build' task\ngulp.task('default', gulp.series('build'));","lang":"javascript","description":"This `gulpfile.js` demonstrates defining Gulp 4 tasks using plain functions, composing them with `gulp.series` and `gulp.parallel`, and using `gulp.src` and `gulp.dest` with popular plugins for cleaning, image optimization, CoffeeScript compilation, minification, concatenation, and sourcemap generation. It also includes a `watch` task for development."},"warnings":[{"fix":"Rewrite task dependencies using `gulp.series()` and `gulp.parallel()` combinators. For example, `gulp.task('build', gulp.series('clean', gulp.parallel('scripts', 'styles')))`.","message":"Gulp 4 introduced significant breaking changes to task definition. The array syntax for defining task dependencies (e.g., `gulp.task('build', ['clean', 'scripts'])`) was removed. Tasks must now be composed using `gulp.series()` for sequential execution and `gulp.parallel()` for concurrent execution.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure your task function returns a stream (e.g., `gulp.src(...).pipe(...)`), returns a Promise (e.g., `return del(['build'])`), or accepts a `done` callback and calls `done()` when finished.","message":"Asynchronous tasks in Gulp 4 (tasks that don't immediately return a value) must signal their completion. This is achieved by returning a stream, returning a Promise, returning an RxJS observable, returning a child process, or accepting a callback function and calling it when done.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use named functions for tasks, either by defining them separately and passing the reference (`function myTask() {}; gulp.task(myTask);`) or by exporting them directly (`exports.myTask = function() {};`).","message":"Defining tasks as anonymous functions (`gulp.task('name', function() {})`) makes debugging and understanding task graphs difficult as they appear as `<anonymous>` in the CLI. Gulp 4 encourages named functions.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"For CommonJS `gulpfile.js`, use `del` version `^6.0.0`. If you need `del@7.0.0` or newer, migrate your `gulpfile.js` to ES Modules (e.g., rename to `gulpfile.mjs` or set `\"type\": \"module\"` in `package.json`).","message":"The `del` package (a common dependency for cleaning) moved to pure ESM in version 7.0.0. If your `gulpfile.js` is still CommonJS, you might encounter issues unless using a version of `del` that supports CommonJS, or by switching your `gulpfile` to ESM.","severity":"breaking","affected_versions":"del@>=7.0.0"},{"fix":"Ensure `gulp-cli` is installed globally and `gulp` is installed as a dev dependency in your project. Verify versions with `gulp -v`.","message":"The `gulp-cli` package is a separate installation (`npm install -g gulp-cli`) from the `gulp` library itself (`npm install --save-dev gulp`). Both are necessary for running Gulp commands effectively.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Replace the dependency array with `gulp.series()` or `gulp.parallel()`. Example: `gulp.task('name', gulp.series('dep', function() {}))`.","cause":"Attempting to use the Gulp 3 task dependency array syntax (e.g., `gulp.task('name', ['dep'], function() {})`) in Gulp 4.","error":"AssertionError: Task function must be specified"},{"fix":"Ensure the referenced task is either defined as a named function and passed to `gulp.task(myTask)` or `exports.myTask = myTask`, or directly passed as a function to `gulp.series()`/`gulp.parallel()`.","cause":"A task function was not correctly defined or exposed, or a string reference was used for a task that isn't registered via `gulp.task()` or exported.","error":"Task 'taskName' is not a function"},{"fix":"Double-check task names for typos. Ensure tasks intended to be run by string name are correctly exposed either by `gulp.task('taskName', myFunc)` or by `exports.taskName = myFunc` if using the modern module pattern.","cause":"The task name used in `gulp.series()` or `gulp.parallel()` (as a string) does not correspond to a registered or exported Gulp task.","error":"Task never defined: taskName"},{"fix":"Remove `.sync()` and ensure your task returns the Promise from `del()`. Example: `function clean() { return del(['build']); }`. If still failing, check `del` version compatibility with your `gulpfile`'s module system (CJS vs ESM).","cause":"Using `del.sync()` with newer versions of the `del` package, which moved to an async-only API and ESM.","error":"TypeError: del is not a function"}],"ecosystem":"npm"}