Gulp.js is a great tool for automating web design and development process.Tapping into automating development process , we can speed up our workflow and focus on the zone. Since Using CSS preprocessor like Sass, Scss or Stylus is a basic skill for modern front-end developer, it's a great point to start. This presentation provides a quick start to using gulp.js to convert Sass and refresh browser automatically.

1. Gulp.js
Install, convert Sass to CSS and livereload

2. 3 steps to use gulp.js
1. install gulp globally
2. install gulp to your project
3. write some code

3. Install gulp globally
1. Open terminal
2. type “npm install -g gulp”
3. wait…

4. Install gulp to your project
1. Go to [your project] in terminal
2. Type “npm install --save-dev gulp”
3. Drink some coffee

5. Write some code
1. Add a new file “gulpfile.js” to the root directory of
your project
2. Build your first task in your gulpfile.
3. Type “gulp” in your terminal to start task “default”

6. Using gulp plugin
When Sass file was changed, gulp will refresh your
browser automatically.

7. Install plugins
1. Type “npm install gulp-sass —save-dev”
2. Type “npm install --save-dev gulp-livereload”
3. Install Chrome livereload plugin
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=zh-TW
4. Edit gulpfile (see next slide)
5. Type “gulp watch” in your terminal to start task “watch”
6. Enable Chrome livereload plugin
7. When gulp detected a change in Sass, it will refresh your
browser automatically

9. Trouble shooting
1. Make sure you’ve required gulp plugins
2. Make sure enable your Chrome live reload
extension (from to )
3. Make sure your Sass directory is right.

10. Demo

11. Thank you.

12. Go explore more
Gulp Plugins
http://gulpjs.com/plugins/