You are on page 1of 35

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