Save 37% off PRO during our Black Friday Sale! »

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

Be13d7aa8512cf2b2068047f0006f8a5?s=128

Callum Macrae

February 10, 2015
Tweet

Transcript

  1. Building with Gulp Callum Macrae | @callumacrae

  2. @callumacrae Front-end developer at Lost My Name Author of “Learning

    from jQuery”
  3. 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')); });
  4. Streams

  5. Streams

  6. Open Source

  7. Why Gulp?

  8. None
  9. 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')); });
  10. Using Gulp

  11. Tasks gulp.task('copyFiles', function () { console.log('Copying files!') return gulp.src('dir1/*') .pipe(gulp.dest('dir2'));

    });
  12. Tasks

  13. Default task gulp.task('default', function () { // Do something here

    });
  14. Plugins http://gulpjs.com/plugins/ Plugins are tagged “gulpplugin” in npm Friendly libraries

    are tagged “gulpfriendly”
  15. 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
  16. 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')); });
  17. gulp-load-plugins var gulp = require('gulp'); var loadPlugins = require('gulp-load-plugins'); var

    plugins = loadPlugins(); plugins.uglify === require('gulp-uglify');
  18. There’s a plugin for that

  19. Running other tasks gulp.task('build', gulp.series('lint', 'js')); gulp.task('default', gulp.parallel('watchers', 'build'));

  20. Watching with Gulp

  21. Watching files gulp.task('default', function () { gulp.watch('assets/js/*.js', 'scripts'); });

  22. Watching files gulp.task('default', function () { gulp.watch('assets/js/*.js', function () {

    console.log('File changed'); }); });
  23. Demo

  24. browser-sync var browserSync = require('browser-sync'); gulp.task('browser-sync', function () { browserSync.init(['css/*.css'],

    { server: { baseDir: './' } }); });
  25. None
  26. • Utility functions that plugins—and you—can use • Log to

    console with [gulp] prefix and colours • Simple templating • Create new virtual files gulp-util
  27. Installing Gulp

  28. Install through npm Install gulp globally Install to project dependencies

    npm install --save-dev gulp gulp-util npm install -g gulp
  29. 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
  30. Questions? Callum Macrae | @callumacrae