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/