BUILD SYSTEMS

Inputfile

Exec.task

Outputfile

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

Read file(s) Task 1 Task 2 Task 3

Writefile(s)

Filesystem

File system What you probably imaginedInput

Output

Read file(s) Task 1 Read

file(s) Task 2Writefile(s)

“temp”folder

File system

Hopefully not what you imagined

Input Output

Writefile(s)

FilesystemFinal Output

Plugins do more than one task

Plugins do tasks that shouldn’t be in a plugin, like tests

gruntfile.js is configuration, not code

Grunt

Build systems should empower, not impede

GulpWith 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

gulp-less gulp-uglify

gulp-concat gulp-header

gulp-minify-css

gulp-help gulp-notify gulp-autoprefixer gulp-recess moment

npm install

One can use Node packages instead

of gulp plugins

npmjs.org/package/del = npmjs.org/package/gulp-clean

npm install gulp-gruntnpmjs.org/package/gulp-grunt

Gulp ain’t all awesome

Error management ≠ good

Use casesBecause 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