Input Exec.

file task

BUILD Output
SYSTEMS file
 gruntjs.com
+2 years old

npm install -g grunt-cli

Grunt is a task-based
command line build tool for
JavaScript projects.
Original purpose of Grunt - 2012
gruntfile.js
 Plugins

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');

1. Compile LESS to CSS

2. Concatenate and minify JavaScript
3. Watch source files for changes
 Simple Task

autoprefixer: {
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
},
styles: {
expand: true,
flatten: true,
src: '<%=src%>/assets/css/*.css',
dest: '<%=src%>/assets/css/'
},
},
 Complex Task

assemble: {
options: {
flatten: true,
data: ['<%=site.source%>/data/*.{json,yml}', 'package.json'],
plugins: [
'assemble-middleware-permalinks',
'assemble-middleware-anchors',
'assemble-middleware-wordcount'
],
helpers: [
'handlebars-helper-compose',
'handlebars-helper-moment',
'./src/js/helpers/*.js' // Custom helpers
],
assets: '<%=site.development%>/assets',
partials: [opt.tpl + '/partials/**/*.{hbs,md}', opt.tpl + '/snippets/**/*.{hbs,md}'],
layoutdir: opt.tpl + '/layouts',
layout: 'default.hbs',
collections: [
{
name: 'post',
sortby: 'date',
sortorder: 'descending',
pages: [opt.posts]
}
],
marked: {
highlight: function (code, lang) {
if (lang === undefined) lang = 'bash';
if (lang === 'js') lang = 'javascript';
if (lang === 'less') lang = 'scss';
return hljs.highlight(lang, code).value;
}
},
sitemap: {
homepage: '<%=site.url%>',
changefreq: 'daily',
priority: '0.8',
robot: true
},
permalinks: {
structure: ':basename/index.html'
},
compose: {
cwd: opt.posts
}
},

pages: {
files: [
{
src: opt.pages + '/*.{hbs,md}',
dest: opt.dev + '/'
}
]
},

posts: {
options: {
layout: 'layout-blog.hbs',
permalinks: {
structure: ':year/:basename/index.html'
},
feed: {
debug: true,
prettify: true,
dest: 'rss.xml'
},
wordcount: { selector: '.article-content' }
},
files: [
{
src: opt.posts + '/**/*.{hbs,md}',
dest: opt.dev + '/'
},
{
src: opt.pages + '/index.hbs',
dest: opt.dev + '/index.html'
}
]
},

projects: {
permalinks: {
structure: ':year/:basename/index.html'
},
files: [
{
src: opt.projects + '/*.{hbs,md}',
dest: opt.dev + '/'
}
]
 gulpjs.com
>1 year old

npm install -g gulp

Gulp does nothing but provide some streams and a
basic task system.
- Eric Schoffstall
STREAMS
Why are steams so great?
Imagine the I/O and tasks of a build system
 File
system Input What you probably imagined

Read Write
Task 1 Task 2 Task 3
file(s) file(s)

File
Output system
Input Output
File temp
system folder

Read Write Read Write

Task 1 Task 2
file(s) file(s) file(s) file(s)

File
Hopefully not what you imagined Final Output system
 Grunt

Plugins do more than one task

Plugins do tasks that shouldnt be in a plugin, like tests

gruntfile.js is configuration, not code

Build systems should
empower, not impede
 Gulp
With Gulp your build file is code and not config

Plugins are simple and do one thing most are a ~20 line function

Tasks are executed with maximum concurrency

I/O works the way you picture it

There are only five things
you need to know to
understand gulp.
 gulp.task(name,fn)
Registers the function with a name that can be executed from the CLI
gulp.src(glob)
Returns a readable stream
gulp.dest(glob)
Returns a writable stream
 .pipe()
Node.js function that takes the readable source stream, gulp.src
and hooks the output to the destination writable stream, gulp.dest

github.com/substack/stream-handbook#pipe
.pipe(foo) returns foo, e.g.,

a.pipe(b).pipe(c).pipe(d)

is the same as

a.pipe(b);
b.pipe(c);
c.pipe(d);
 .pipe() in gulp

var a = gulp.src(styles.less'); // input

a.pipe(less()) // => compiled css

.pipe(auto()) // => prefixed css
.pipe(gulp.dest(styles.css')); // => output
gulp.task('styles', function () {
gulp.src('/less/styles.less')
.pipe(less())
.pipe(gulp.dest('/public/css'))
});
 gulp.watch(glob,fn)
Executes a function when a file that matches the glob changes
gulpfile.js vs gruntfile.js
demo
 npm install

gulp-less gulp-help
gulp-uglify gulp-notify
gulp-concat gulp-autoprefixer
gulp-header gulp-recess
gulp-minify-css moment
 One can use
Node packages instead
of gulp plugins

npmjs.org/package/del = npmjs.org/package/gulp-clean
npm install gulp-grunt
npmjs.org/package/gulp-grunt
 Gulp aint
all awesome
Error management good
Use cases
Because build systems should
empower, not impede
 Continue using Grunt on pre-existing projects
Continue using Grunt with dev teams that are used to it

Start using Gulp for personal projects

Start using Gulp for work projects whenever possible
questions
Patrick Burtchaell

@pburtchaell
pburchaell.com

gibbon.co/pb/gulp