Building workflow in Javascript: Build the awesome with Gulp.
0 likes•511 views
The document provides an introduction to Gulp, a task-based build tool that emphasizes streaming build systems and a code-centric approach over configuration. It highlights key features such as error detection, file concatenation, minification, and various plugins for compiling languages like CoffeeScript and SASS. The Gulp API allows for the creation and management of tasks, watching file changes, and the use of streams for efficient file handling.
![gulp.src(globs[, options])
Returns a readable stream.
Read files that match with provided globs.](https://image.slidesharecdn.com/gulp-140322020608-phpapp01/85/Building-workflow-in-Javascript-Build-the-awesome-with-Gulp-12-320.jpg)
![gulp.task(name[, deps], fn)
Register a Gulp task.](https://image.slidesharecdn.com/gulp-140322020608-phpapp01/85/Building-workflow-in-Javascript-Build-the-awesome-with-Gulp-14-320.jpg)
![gulp.watch(glob [, opts], tasks)
gulp.watch(glob [, opts, cb])
Watch files and do something when a file changes.](https://image.slidesharecdn.com/gulp-140322020608-phpapp01/85/Building-workflow-in-Javascript-Build-the-awesome-with-Gulp-15-320.jpg)
Building workflow in Javascript: Build the awesome with Gulp.
- 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
- 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 @: [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