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

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?
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: './' } }); });
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