1. GULP
• @Supaket

2. WHAT IS GULP
Not A BIG GULP

3. WHAT IS GULP ?
• The streaming build system power by javascript!

4. WHAT IS GULP
• Front-end developmentTool
• Task automation
• Stream build system

5. TECHNOLOGY UNDERLYING

6. DETAILS
gulpfile.js
Tells Gulp for every tasks,
what those tasks are,
when to run them.
package.json
List of installed plugins

7. API
• task
• src
• pipe
• dest
• watch

8. TASK
src - Takes a glob & represents a file structure
gulp.src(globs)
globs ! file path

9. PIPE
pipe - for data streaming
(output from previous. process become input for the next process)
.pipe([data_stream])
data_stream ! task or file

10. DEST
dest - Write files into desired directory
• gulp.dest(path)
path ! file directory for written files

11. WATCH
watch - Watch files and do something when a file changes
• gulp.watch(glob, fn)
glob ! file(s) to watch for changes.
fn ! defined function
(added with gulp.task())

12. DEMO WORKFLOW
SASS CSS
SRC SITE
CSS
BROWER
CSS

13. LET’S DO IT.
$ npm install -g gulp
(install Gulp globally)
Create gulpfile.js & package.json
$ npm install [plugin_name] --save (project folder)

14. RESOURCE AND REFERENCE
• https://github.com/kogakure/gulp-tutorial
• http://www.slideshare.net/Awilum/gulp-the-streaming-build-
system-41140394
• http://www.slideshare.net/apdhtg6/introduction-to-gulp-37075907
• https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/
guidelines.md