src, pipe, dest & Plugins

Code Over Configuration

Gulp tasks are plain JavaScript functions you compose, rather than large config objects (Grunt's/webpack's style). File contents flow through a pipeline as Node.js streams — no writing intermediate results to disk between steps, which is a key performance advantage.

A Basic Pipeline

const { src, dest, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');

function styles() {
  return src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(rename({ suffix: '.min' }))
    .pipe(dest('dist/css'));
}

function scripts() {
  return src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(dest('dist/js'));
}

exports.styles = styles;
exports.scripts = scripts;
exports.build = parallel(styles, scripts);

Vinyl Files

Plugins operate on "vinyl" objects — Gulp's virtual file format holding path, contents, and metadata — a standardized in-memory representation that lets each plugin transform files without reimplementing disk I/O itself.

series() vs. parallel()

series(a, b) runs a, waits for it to finish, then runs b. parallel(a, b) runs both simultaneously. This explicit composition (Gulp 4) replaced Gulp 3's implicit dependency-array ordering.