Gulp.jsInstall, convert Sass to CSS and livereload

3 steps to use gulp.js

1. install gulp globally

2. install gulp to your project

3. write some code

Install gulp globally

1. Open terminal

2. type “npm install -g gulp”

3. wait…

Install gulp to your project

1. Go to [your project] in terminal

2. Type “npm install --save-dev gulp”

3. Drink some coffee

Write some code1. 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”

Using gulp pluginWhen Sass file was changed, gulp will refresh your

browser automatically.

Install plugins1. Type “npm install gulp-sass —save-dev”

2. Type “npm install --save-dev gulp-livereload”

3. Install Chrome livereload pluginhttps://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

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.

Demo

Thank you.

Go explore more Gulp Plugins

http://gulpjs.com/plugins/