Gulp is a streaming build system that helps automate painful or time-consuming tasks in development workflows. It leverages Node.js streams for efficient file processing and provides a minimal API surface with core methods for reading files, writing output, monitoring changes, and orchestrating task execution.
npm install gulpnpm install -g gulp-cligulpconst gulp = require('gulp');ES Modules:
import gulp from 'gulp';
// or destructured imports
import {
src, dest, symlink,
watch, task, series, parallel,
registry, tree, lastRun
} from 'gulp';const gulp = require('gulp');
// Define a task function
function styles() {
return gulp.src('src/styles/**/*.css')
.pipe(/* some transformation */)
.pipe(gulp.dest('dist/styles/'));
}
// Define another task
function scripts() {
return gulp.src('src/scripts/**/*.js')
.pipe(/* some transformation */)
.pipe(gulp.dest('dist/scripts/'));
}
// Watch files for changes
function watchFiles() {
gulp.watch('src/styles/**/*.css', styles);
gulp.watch('src/scripts/**/*.js', scripts);
}
// Compose tasks in series or parallel
const build = gulp.series(gulp.parallel(styles, scripts));
// Export tasks for CLI usage
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watchFiles;
exports.build = build;
exports.default = build;When tasks are exported from a gulpfile, they can be run from the command line using the
gulp# Run the default task
gulp
# Run specific tasks
gulp build
gulp styles
gulp watch
# Run multiple tasks
gulp clean build
# List available tasks
gulp --tasks
# Run task with verbose output
gulp build --verboseGulp is built around several key concepts:
Core file system operations for reading source files, writing processed outputs, and creating symbolic links.
function src(
globs: string | string[],
options?: SrcOptions
): NodeJS.ReadableStream;
function dest(
path: string | Function,
options?: DestOptions
): NodeJS.WritableStream;
function symlink(
path: string | Function,
options?: SymlinkOptions
): NodeJS.WritableStream;Task definition, orchestration, and execution capabilities for building complex workflows.
function task(name: string): Function;
function task(name: string, fn: Function): void;
function series(...tasks: (string | Function)[]): Function;
function parallel(...tasks: (string | Function)[]): Function;
function watch(
globs: string | string[],
options?: WatchOptions,
task?: Function
): Watcher;
function registry(registry?: Registry): Registry | void;
function tree(options?: TreeOptions): TaskTree;
function lastRun(
task: string | Function,
timeResolution?: number
): number | undefined;Access to the Gulp constructor for creating additional instances.
/**
* Gulp constructor for creating new instances
* @returns New Gulp instance with all methods
*/
function Gulp(): Gulp;Usage Example:
const gulp = require('gulp');
// Access the constructor
const GulpClass = gulp.Gulp;
// Create a new instance
const newGulpInstance = new GulpClass();interface SrcOptions {
buffer?: boolean;
read?: boolean;
since?: Date;
removeBOM?: boolean;
sourcemaps?: boolean | string;
allowEmpty?: boolean;
dot?: boolean;
cwd?: string;
base?: string;
}
interface DestOptions {
cwd?: string;
mode?: string | number;
dirMode?: string | number;
overwrite?: boolean;
append?: boolean;
sourcemaps?: boolean | string;
}
interface SymlinkOptions {
cwd?: string;
mode?: string | number;
dirMode?: string | number;
overwrite?: boolean;
useJunctions?: boolean;
}
interface WatchOptions {
/** Whether to ignore initial file additions (default: true) */
ignoreInitial?: boolean;
/** Delay before triggering task after changes (ms) */
delay?: number;
/** Whether to queue task executions (default: true) */
queue?: boolean;
/** Additional options passed to the underlying chokidar watcher */
[key: string]: any;
}
interface Watcher {
/** Stop watching files and clean up resources */
close(): void;
/** Add additional glob patterns to watch */
add(globs: string | string[]): void;
/** Remove glob patterns from watching */
unwatch(globs: string | string[]): void;
}
interface Registry {
/** Get a task by name from the registry */
get(name: string): Function;
/** Set/register a task in the registry */
set(name: string, fn: Function): void;
/** Get all registered tasks as name-function pairs */
tasks(): { [name: string]: Function };
}
interface TreeOptions {
/** Show task dependencies (default: false) */
deep?: boolean;
}
interface TaskTree {
/** Display name for the task or task group */
label: string;
/** Type of node ('task', 'function', 'series', 'parallel') */
type: string;
/** Child nodes representing dependencies or sub-tasks */
nodes: TaskTree[];
}