building workflow in javascript: build the awesome with gulp

GulpAn Introduction

• Detect errors, running test.

• Concatenating and minifying JS, CSS.

• Compile CoffeeScript, SASS, LESS, etc.

• ….

“I realized that a task-based build tool with built-in, commonly used tasks was the approach that would work best for me” — Ben Alman (03/2012)

A new player appears:

What is Gulp?• Streaming build system

• Code over configuration

• Small, idiomatic plugins

• Simple API to use

Streams

Lint Run test

Concatenate Minify

Streams

Streams

• Gulp use streams:

• Like the pipe command of *NIX (|)

=> Less I/O operations => Faster building speed

Config vs Code

Gulp API

gulp.src(globs[, options])Returns a readable stream.

Read files that match with provided globs.

gulp.dest(path)Returns a writable stream.

Write piped file objects to the provided path.

gulp.task(name[, deps], fn)Register a Gulp task.

gulp.watch(glob [, opts], tasks) gulp.watch(glob [, opts, cb])

Watch files and do something when a file changes.

Read more…

• GulpJS Homepage

• Gulp by Eric Schoffstall

• Build Wars - Gulp vs Grunt

• Stream Handbook

Demo

• You can get it from Dropbox:

• http://goo.gl/iFL9JM

About @Vinh Bachsy• Author: Vinh Bachsy @: bsdvinhuit@gmail.com

• You can follow me at:

• https://plus.google.com/+VinhBachsy

• https://www.facebook.com/vinh.bachsy

• And the Javascript HCM Meetup:

• http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/

• https://www.facebook.com/JavaScriptHCMC

• https://plus.google.com/communities/116105314977285194967