Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jpachecox/setup-gulp/llms.txt

Use this file to discover all available pages before exploring further.

Setup Gulp’s gulpfile.js is organised around a set of focused, composable Gulp 4 tasks. Each task handles one concern — compiling SCSS, transpiling TypeScript, optimising images, and so on — and the top-level build, watch, and serve tasks wire them together. All tasks are defined with gulp.task() and can be run individually with the gulp <taskName> command, or via the yarn script aliases defined in package.json.

​
All Tasks at a Glance

TaskRun withPurpose
serveyarn serveStarts a BrowserSync dev server rooted at ./
watchyarn startWatches all src/ files and recompiles on change
buildyarn buildFull parallel production build
cleanAssetsyarn cleanDeletes assets/ and src/css/ contents
sassgulp sassCompiles root SCSS + merges normalize.css
sassComponentsgulp sassComponentsCompiles component SCSS with component- prefix
sassSectionsgulp sassSectionsCompiles section SCSS with section- prefix
minifyCssgulp minifyCssMinifies compiled CSS and outputs to assets/
lintScssgulp lintScssLints SCSS files with gulp-sass-lint
jsgulp jsTranspiles and minifies root TypeScript files
jsComponentsgulp jsComponentsTranspiles component TypeScript with component- prefix
jsSectionsgulp jsSectionsTranspiles section TypeScript with section- prefix
lintJsgulp lintJsLints TypeScript files with gulp-eslint
fontsgulp fontsCopies fonts from src/fonts/ to assets/
imagesgulp imagesOptimises images and outputs to assets/

​
The watch Task

The watch task sets up persistent file watchers across every source directory. When a file changes, only the relevant task is triggered — keeping rebuilds fast and incremental. 
gulp.task('watch', () => {
  gulp.watch(paths.font,           gulp.series('fonts'))
  gulp.watch(paths.img,            gulp.series('images'))
  gulp.watch(paths.jsComponents,   gulp.series('jsComponents'))
  gulp.watch(paths.jsSections,     gulp.series('jsSections'))
  gulp.watch(paths.js,             gulp.series('js'))
  gulp.watch(paths.sassComponents, gulp.series('sassComponents'))
  gulp.watch(paths.sassSections,   gulp.series('sassSections'))
  gulp.watch(paths.sass,           gulp.series('sass'))
  gulp.watch(paths.css,            gulp.series('minifyCss'))
  browserSync.stream()
})
The glob-to-task mapping is:
GlobTask triggered
./src/fonts/**/*fonts
./src/img/**/*.+(png|jpg|jpeg|gif|svg)images
./src/js/components/*.tsjsComponents
./src/js/sections/*.tsjsSections
./src/js/*.tsjs
./src/scss/components/*.scsssassComponents
./src/scss/sections/*.scsssassSections
./src/scss/*.scsssass
./src/css/*.cssminifyCss
Run the watcher with: 
yarn start

​
The build Task

The build task runs all compilation, optimisation, and copy tasks in parallel using gulp.parallel(). It is the standard entry point for producing a fully compiled set of output files in assets/. 
gulp.task(
  'build',
  gulp.parallel(
    'cleanAssets',
    'fonts',
    'images',
    'jsComponents',
    'jsSections',
    'js',
    'sassComponents',
    'sassSections',
    'sass',
    'minifyCss'
  )
)
The default task is an alias that runs build in series: 
gulp.task('default', gulp.series('build'))
Run a full build with: 
yarn build
Every task pipes its source through gulp-plumber, which catches stream errors and passes them to the handleErrors function. When a task fails, gulp-notify displays a desktop notification with the error message and gulp-util emits an audible beep. The process then exits with a non-zero code so CI pipelines register the failure correctly.

Build docs developers (and LLMs) love

Get started for freeTalk to us