Gulp
An 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”...
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/+VinhBa...
Building workflow in Javascript: Build the awesome with Gulp.
Upcoming SlideShare
Loading in …5
×

Building workflow in Javascript: Build the awesome with Gulp.

1,341 views

Published on

by Vinh Bach, Silicon Straits Saigon

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,341
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building workflow in Javascript: Build the awesome with Gulp.

  1. 1. Gulp An Introduction
  2. 2. • Detect errors, running test. • Concatenating and minifying JS, CSS. • Compile CoffeeScript, SASS, LESS, etc. • ….
  3. 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)
  4. 4. A new player appears:
  5. 5. What is Gulp? • Streaming build system • Code over configuration • Small, idiomatic plugins • Simple API to use
  6. 6. Streams Lint Run test Concatenate Minify
  7. 7. Streams
  8. 8. Streams • Gulp use streams: • Like the pipe command of *NIX (|) => Less I/O operations => Faster building speed
  9. 9. Config vs Code
  10. 10. Gulp API
  11. 11. gulp.src(globs[, options]) Returns a readable stream. Read files that match with provided globs.
  12. 12. gulp.dest(path) Returns a writable stream. Write piped file objects to the provided path.
  13. 13. gulp.task(name[, deps], fn) Register a Gulp task.
  14. 14. gulp.watch(glob [, opts], tasks) gulp.watch(glob [, opts, cb]) Watch files and do something when a file changes.
  15. 15. Read more… • GulpJS Homepage • Gulp by Eric Schoffstall • Build Wars - Gulp vs Grunt • Stream Handbook
  16. 16. Demo • You can get it from Dropbox: • http://goo.gl/iFL9JM
  17. 17. 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

×