Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building with Gulp

Building with Gulp

Gulp is a build tool which you can use to automate tasks involved in the development of a website, such as compiling Sass, minifying JavaScript, and generating sprites. The talk will introduce Gulp and some of the things you can do with it, and will also explain some of the differences between the current version of Gulp and the upcoming version of Gulp, Gulp 4.

The code from the demo is here: https://github.com/callumacrae/gulpTalk

Callum Macrae

February 10, 2015

More Decks by Callum Macrae

Other Decks in Programming


  1. What is Gulp? gulp.task('scripts', function () { return gulp.src('assets/js/*.js') .pipe(jshint())

    .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build/js')); });
  2. It’s really easy gulp.task('scripts', function () { return gulp.src('assets/js/*.js') .pipe(jshint())

    .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build/js')); });
  3. Installing a plugin Install through npm Add them to your

    gulp file using require var uglify = require('gulp-uglify'); npm install --save-dev gulp-uglify
  4. Using a plugin var gulp = require('gulp'); var uglify =

    require('gulp-uglify'); gulp.task('scripts', function () { return gulp.src('assets/js/*.js') .pipe(uglify()) .pipe(gulp.dest('build/js')); });
  5. gulp-load-plugins var gulp = require('gulp'); var loadPlugins = require('gulp-load-plugins'); var

    plugins = loadPlugins(); plugins.uglify === require('gulp-uglify');
  6. • Utility functions that plugins—and you—can use • Log to

    console with [gulp] prefix and colours • Simple templating • Create new virtual files gulp-util
  7. Install through npm Install gulp globally Install to project dependencies

    npm install --save-dev gulp gulp-util npm install -g gulp
  8. Gulp • Open sourced task runner written using Node.js •

    Uses streams—it’s very fast • Easy to use, many plugins available • Watches files and runs tasks on changes