Gulp.js Crash Course

My notes from the video by Traversy Media, located at:


What is Gulp

  • Open source JavaScript toolkit & task runner
  • Front-end build system
  • Built on Node.js and NPM
  • Used for time consuming & repetitive tasks

Common Tasks

  • Minification of scripts and styles
  • Concatenation
  • Cache busing
  • Testing, linting, and optimization
  • Dev servers

How Gulp Works

  • Built on node streams
  • Pipelines / .pipe() operator
  • Single purpues plugins
  • Files not affected until all plugins are processed


  1. install - sudo npm install -g gulp (installs gulp globally)
  2. install locally sudo npm install --save-dev gulp (makes it a development dependency)
  3. make a gulpfile.js

Top level Gulp functions

  1. gulp.task - Define tasks
  2. gulp.src - Point to files to use
  3. gulp.dest - Points to folder to output
  4. - watch files and folders for changes

Gulp Examples


Gulp watch

gulp.task('watch, function(){'src/js/*.js', ['scripts']);'src/images/*.scss', ['sass']);'src/*.html', ['copyHtml']);
Gulp.js Crash Course
Share this