You are on page 1of 35

Input Exec.

file task

BUILD Output
+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


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: [
helpers: [
'./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: + '/'

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: + '/'
src: opt.pages + '/index.hbs',
dest: + '/index.html'

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

npm install -g gulp

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

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

Output system
Input Output
File temp
system folder

Read Write Read Write

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

Hopefully not what you imagined Final Output system

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
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.
Registers the function with a name that can be executed from the CLI
Returns a readable stream
Returns a writable stream
Node.js function that takes the readable source stream, gulp.src
and hooks the output to the destination writable stream, gulp.dest
.pipe(foo) returns foo, e.g.,


is the same as

.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 () {
Executes a function when a file that matches the glob changes
gulpfile.js vs gruntfile.js
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 =
npm install 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
Patrick Burtchaell