gulp插件gulp-ruby-sass和livereload插件
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: C++多线程实例(_beginThrea
- 下一篇: 【多视图几何】TUM 课程 第2章 刚体