Follow us on : Facebook: https://www.facebook.com/siliconstraitssaigon Website: http://www.siliconstraits.vn/ Blog: http://blog.siliconstraits.vn/

1. Gulp
An Introduction

2. • Detect errors, running test.
• Concatenating and minifying JS, CSS.
• Compile CoffeeScript, SASS, LESS, etc.
• ….

3. “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)

5. A new player appears:

6. What is Gulp?
• Streaming build system
• Code over configuration
• Small, idiomatic plugins
• Simple API to use

7. Streams
Lint
Run test
Concatenate
Minify

8. Streams

9. Streams
• Gulp use streams:
• Like the pipe command of *NIX (|)
=> Less I/O operations => Faster building speed

10. Config vs Code

11. Gulp API

12. gulp.src(globs[, options])
Returns a readable stream.
Read files that match with provided globs.

13. gulp.dest(path)
Returns a writable stream.
Write piped file objects to the provided path.

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

15. gulp.watch(glob [, opts], tasks)
gulp.watch(glob [, opts, cb])
Watch files and do something when a file changes.

16. Read more…
• GulpJS Homepage
• Gulp by Eric Schoffstall
• Build Wars - Gulp vs Grunt
• Stream Handbook

17. Demo
• You can get it from Dropbox:
• http://goo.gl/iFL9JM

18. 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