![Page 1: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/1.jpg)
GulpAn Introduction
![Page 2: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/2.jpg)
• Detect errors, running test.
• Concatenating and minifying JS, CSS.
• Compile CoffeeScript, SASS, LESS, etc.
• ….
![Page 3: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/3.jpg)
“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)
![Page 4: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/4.jpg)
![Page 5: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/5.jpg)
A new player appears:
![Page 6: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/6.jpg)
What is Gulp?• Streaming build system
• Code over configuration
• Small, idiomatic plugins
• Simple API to use
![Page 7: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/7.jpg)
Streams
Lint Run test
Concatenate Minify
![Page 8: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/8.jpg)
Streams
![Page 9: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/9.jpg)
Streams
• Gulp use streams:
• Like the pipe command of *NIX (|)
=> Less I/O operations => Faster building speed
![Page 10: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/10.jpg)
Config vs Code
![Page 11: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/11.jpg)
Gulp API
![Page 12: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/12.jpg)
gulp.src(globs[, options])Returns a readable stream.
Read files that match with provided globs.
![Page 13: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/13.jpg)
gulp.dest(path)Returns a writable stream.
Write piped file objects to the provided path.
![Page 14: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/14.jpg)
gulp.task(name[, deps], fn)Register a Gulp task.
![Page 15: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/15.jpg)
gulp.watch(glob [, opts], tasks) gulp.watch(glob [, opts, cb])
Watch files and do something when a file changes.
![Page 16: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/16.jpg)
Read more…
• GulpJS Homepage
• Gulp by Eric Schoffstall
• Build Wars - Gulp vs Grunt
• Stream Handbook
![Page 18: Building workflow in Javascript: Build the awesome with Gulp](https://reader036.vdocument.in/reader036/viewer/2022081907/54b6c6df4a79599f728b45a7/html5/thumbnails/18.jpg)
About @Vinh Bachsy• Author: Vinh Bachsy @: [email protected]
• 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