# Gulp — Streaming Build System for JavaScript

> Gulp is a toolkit for automating development workflows. It uses Node.js streams to pipe files through transformation steps, making builds fast and code-over-configuration.

## Install

Save in your project root:

# Gulp — Streaming Build System for JavaScript

## Quick Use
```bash
npm install --save-dev gulp
```
```javascript
// gulpfile.js
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function styles() {
  return src('src/**/*.scss').pipe(sass()).pipe(dest('dist/css'));
}
exports.default = series(styles);
```
```bash
npx gulp
```

## Introduction
Gulp is a JavaScript build tool that leverages Node.js streams to read files, pipe them through plugins, and write the output. Its code-over-configuration approach means build tasks are plain JavaScript functions, making them easy to write, debug, and compose.

## What Gulp Does
- Reads source files and pipes them through transform plugins as Node.js streams
- Compiles Sass, Less, and PostCSS stylesheets
- Minifies, concatenates, and fingerprints JavaScript and CSS assets
- Watches files for changes and re-runs tasks automatically
- Orchestrates task dependencies with series and parallel execution

## Architecture Overview
Gulp 4 uses a task system built on undertaker and a virtual file system (vinyl-fs). Source files are represented as vinyl objects flowing through Node.js transform streams. Each plugin receives a stream, modifies it, and passes it along. This streaming approach avoids writing intermediate files to disk, reducing I/O overhead for large builds.

## Self-Hosting & Configuration
- Install globally (`npm i -g gulp-cli`) and locally (`npm i --save-dev gulp`)
- Define tasks in `gulpfile.js` or `gulpfile.ts` at the project root
- Use `gulp.watch()` to trigger rebuilds on file changes during development
- Compose tasks with `series()` for sequential and `parallel()` for concurrent execution
- Integrates with CI pipelines via standard npm scripts

## Key Features
- Stream-based architecture that avoids temporary files for better performance
- Code-over-configuration lets you use the full power of JavaScript in builds
- Rich plugin ecosystem with thousands of transform plugins on npm
- Built-in file watching with glob-based pattern matching
- Simple API: src, dest, series, parallel, and watch cover most use cases

## Comparison with Similar Tools
- **Webpack** — module bundler with dependency graph; Gulp is a general task runner
- **Vite** — modern dev server and bundler; Gulp suits non-bundling tasks like image optimization
- **Grunt** — configuration-driven task runner; Gulp uses code and streams instead
- **npm scripts** — lightweight but lack file streaming and watch orchestration
- **Make** — language-agnostic but has no native understanding of Node.js streams

## FAQ
**Q: Is Gulp still relevant with modern bundlers?**
A: Yes. Gulp excels at tasks outside bundling: image optimization, file copying, asset pipelines, and build orchestration alongside other tools.

**Q: How does Gulp compare to Webpack?**
A: Webpack is a module bundler focused on JavaScript dependency graphs. Gulp is a general-purpose task runner that can orchestrate any file transformation.

**Q: Can Gulp work with TypeScript?**
A: Yes. Name your config `gulpfile.ts` and install `ts-node`, or use gulp-typescript as a plugin.

**Q: What happened to Gulp 3 vs Gulp 4?**
A: Gulp 4 replaced the old task system with explicit `series()` and `parallel()` functions and improved error handling.

## Sources
- https://github.com/gulpjs/gulp
- https://gulpjs.com/docs/en/getting-started/quick-start

---
Source: https://tokrepo.com/en/workflows/43c50ebb-44f8-11f1-9bc6-00163e2b0d79
Author: AI Open Source