@callumacrae
Front-end developer at Lost My Name
Author of “Learning from jQuery”
Slide 3
Slide 3 text
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'));
});
Default task
gulp.task('default', function () {
// Do something here
});
Slide 14
Slide 14 text
Plugins
http://gulpjs.com/plugins/
Plugins are tagged “gulpplugin” in npm
Friendly libraries are tagged “gulpfriendly”
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
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'));
});
Slide 17
Slide 17 text
gulp-load-plugins
var gulp = require('gulp');
var loadPlugins = require('gulp-load-plugins');
var plugins = loadPlugins();
plugins.uglify === require('gulp-uglify');
Slide 18
Slide 18 text
There’s a plugin for that
Slide 19
Slide 19 text
Running other tasks
gulp.task('build', gulp.series('lint', 'js'));
gulp.task('default',
gulp.parallel('watchers', 'build'));
Slide 20
Slide 20 text
Watching with Gulp
Slide 21
Slide 21 text
Watching files
gulp.task('default', function () {
gulp.watch('assets/js/*.js', 'scripts');
});
Slide 22
Slide 22 text
Watching files
gulp.task('default', function () {
gulp.watch('assets/js/*.js', function () {
console.log('File changed');
});
});
Slide 23
Slide 23 text
Demo
Slide 24
Slide 24 text
browser-sync
var browserSync = require('browser-sync');
gulp.task('browser-sync', function () {
browserSync.init(['css/*.css'], {
server: {
baseDir: './'
}
});
});
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
• Utility functions that plugins—and you—can use
• Log to console with [gulp] prefix and colours
• Simple templating
• Create new virtual files
gulp-util
Slide 27
Slide 27 text
Installing Gulp
Slide 28
Slide 28 text
Install through npm
Install gulp globally
Install to project dependencies
npm install --save-dev gulp gulp-util
npm install -g gulp
Slide 29
Slide 29 text
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