Gulp.js Crash Course

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

https://www.youtube.com/watch?v=1rw9MfIleEg

Notes

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

Installation

  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. gulp.watch - watch files and folders for changes

Gulp Examples

gulp_examples

Gulp watch

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