gulp插件gulp-ruby-sass和livereload插件

gulp-ruby-sass是gulp的一個插件，主要是用來實現sass編譯，livereload插件主要是實現文件保存時瀏覽器自動刷新，避免了手動f5的頻繁的操做

準備工做：chrome瀏覽器安裝livereload插件，沒有安裝的能夠百度搜索或者FQ下載，

1）首先安裝node，全局安裝gulp，若是不瞭解gulp的請先移步到這裏。

2）打開命令行切換到工程目錄下，安裝gulp（cnpm install gulp --save-dev）、gulp-ruby-sass（cnpm install gulp-ruby-sass --save-dev）以及，並在工程根目錄下新建gulpfile.js文件。

3）在gulpfile.js文件中添加以下代碼

 1 // 載入外掛
 2 var gulp = require('gulp'), 
 3     sass = require('gulp-ruby-sass'),
 4     livereload = require('gulp-livereload');
 5 
 6  //定義任務   
 7 gulp.task('sass', function() {
 8     //執行sass（）定義文件路徑以及編譯後的格式
 9     return sass('sass/*.scss',{ style: 'expanded'})
10     //編譯後的輸出路徑
11     .pipe(gulp.dest('css'))
12     //瀏覽器自動刷新
13     .pipe(livereload());   
14 });
15 
16 gulp.task('watch', function() {
17     //調用livereload的listen接口
18     livereload.listen();
19     //監聽'sass/*.scss'，並在文件內容發生改變時，調用'sass'任務
20     gulp.watch('sass/*.scss', ['sass']);
21 });

4）命令行執行gulp sass，

5）點擊瀏覽器紅圈中的按鈕（該按鈕爲livereload插件），中心變爲實心說名一鏈接livereload；可使用

6）命令行執行gulp watch，便可實現瀏覽器的自動刷新