gulp-ruby-sass是gulp的一個(gè)插件，主要是用來(lái)實(shí)現(xiàn)sass編譯，livereload插件主要是實(shí)現(xiàn)文件保存時(shí)瀏覽器自動(dòng)刷新，避免了手動(dòng)f5的頻繁的操作

準(zhǔn)備工作：chrome瀏覽器安裝livereload插件，沒有安裝的可以百度搜索或者FQ下載，

1）首先安裝node，全局安裝gulp，如果不了解gulp的請(qǐng)先移步到這里。

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 //定義任務(wù) 7 gulp.task('sass', function() { 8 //執(zhí)行sass（）定義文件路徑以及編譯后的格式 9 return sass('sass/*.scss',{ style: 'expanded'}) 10 //編譯后的輸出路徑 11 .pipe(gulp.dest('css')) 12 //瀏覽器自動(dòng)刷新 13 .pipe(livereload()); 14 }); 15 16 gulp.task('watch', function() { 17 //調(diào)用livereload的listen接口 18 livereload.listen(); 19 //監(jiān)聽'sass/*.scss'，并在文件內(nèi)容發(fā)生改變時(shí)，調(diào)用'sass'任務(wù) 20 gulp.watch('sass/*.scss', ['sass']); 21 });

4）命令行執(zhí)行g(shù)ulp sass，

5）點(diǎn)擊瀏覽器紅圈中的按鈕（該按鈕為livereload插件），中心變?yōu)閷?shí)心說名一連接livereload；可以使用

6）命令行執(zhí)行g(shù)ulp watch，即可實(shí)現(xiàn)瀏覽器的自動(dòng)刷新

?

轉(zhuǎn)載于:https://www.cnblogs.com/yan-ck/p/5824742.html

總結(jié)

以上是生活随笔為你收集整理的gulp插件gulp-ruby-sass和livereload插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。