gulp livereload實(shí)現(xiàn)sass實(shí)時(shí)編譯及瀏覽器自動(dòng)刷新

首先gulp是基于Node的，所以確保你已經(jīng)安裝 node.js，在Nodejs官方網(wǎng)站下載跟自己操作系統(tǒng)相對應(yīng)的安裝包。

先說一下gulp安裝流程：

1：全局安裝gulp，操作為： npm install gulp -g;
2:在根目錄下創(chuàng)建 package.json文件，操作為：npm init，之后根據(jù)操作輸入“名字，版本號，描述”等內(nèi)容，直接按回車則使用默認(rèn)值，最后根據(jù)提示輸入YES即可；輸完后根目錄下多了個(gè)package.json文件；
3:本地安裝gulp,先進(jìn)入你的項(xiàng)目所在，如d盤下的myproject/app

d: 進(jìn)入D盤；
cd myproject/app 進(jìn)入myproject下面的app文件夾;

然后在當(dāng)前項(xiàng)目根目錄下輸入：
npm install --save-dev gulp；

可以發(fā)現(xiàn)我們安裝了2次，全局安裝gulp是為了執(zhí)行g(shù)ulp任務(wù)，本地安裝gulp則是為了調(diào)用gulp插件的功能。

4.根目錄下創(chuàng)建 gulpfile.js，此為配置文件，有關(guān)gulp的任務(wù)都寫在里面，后面再講。

?

至此,gulp的基本安裝就已經(jīng)結(jié)束，下面來安裝gulp插件，有關(guān)的常用插件像代碼壓縮，圖片壓縮，重命名等還是比較多的，可以去npm上找，再次就不舉例了，本文只用簡單介紹自動(dòng)刷新相關(guān)插件，（本想sass實(shí)時(shí)編譯成css再自動(dòng)刷新的）

先按照服務(wù)器插件：
livereload需要在服務(wù)器上運(yùn)行，可以先npm install http-server -g；裝一個(gè)插件，如果你有自己的本地服務(wù)器也行；
如果系統(tǒng)是win10或者8, 可能會(huì)出錯(cuò)，退出Node再以管理員的身份打開，重新安裝即可；
安裝完然后輸入http-server，出現(xiàn)此圖片代表啟用服務(wù)成功；由于啟用后就沒法進(jìn)行其他操作了（難道是我的問題？），所以再打開一個(gè) node(反正又不要錢)
裝完后以服務(wù)器環(huán)境打開文件，默認(rèn)地址為 http://192.168.0.110:8080 （要找到html文件位置)

接著安裝sass編譯插件，npm install --save-dev gulp-ruby-sass （電腦必須已安裝Ruby環(huán)境，如果沒有可以則安裝gulp-sass插件，64位系統(tǒng)下安裝可能會(huì)出錯(cuò)，據(jù)我查資料說是2進(jìn)制的問題，表示一臉懵逼）

再安裝livereload插件：
npm install gulp gulp-livereload -g

?

安裝完后cd進(jìn)入項(xiàng)目所在位置輸入livereload

?

需要的文件都裝好后，就可以來寫上面的 gulpfile.js配置文件了；

//引入插件
var gulp = require("gulp");
var livereload = require("gulp-livereload");
var sass = require("gulp-ruby-sass");

//執(zhí)行任務(wù)，意思為監(jiān)聽src下的所有文件，發(fā)現(xiàn)有變動(dòng)即刷新瀏覽器，根據(jù)自己的文件目錄寫監(jiān)聽的位置
gulp.task("sass", function() {

return sass("src/sass/*.scss")
.pipe(gulp.dest("src/css2"))
.pipe(livereload());
})

gulp.task('sasswatch', function() {

gulp.watch('src/sass/*.scss',["sass"]

);
});

gulp.task('default', function() {

livereload.listen();
gulp.watch('src/**/*.*',function(file) {
livereload.changed(file.path);
}
);
});

為了讓瀏覽器自動(dòng)刷新還需要裝一個(gè)chrome的插件，但由于要FQ就算了，以下面的方案代替：
在index.html中引入一下script標(biāo)簽

<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')
</script>

至此就可以正常搞起，親測可用。 有雙屏的寫起來爽很多，只要ctrl+s保存就你懂得！！！！呵呵呵呵。

gulp.task是gulp的api之一，作用為定義任務(wù)，有關(guān)其他的api像src watch pipe dest什么的就大家自己研究了。

研究了3個(gè)多小時(shí)，大家要是能用了就點(diǎn)個(gè)贊。有什么問題可以咨詢一下我，我要是懂得就幫你解答一下，不懂得我也沒辦法，本人也就剛工作一個(gè)月的水平，還是比較水的，哪里寫錯(cuò)了大家見諒一下。

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhengrunlin/p/5868159.html

總結(jié)

以上是生活随笔為你收集整理的前端自动化之sass实时编译及自动刷新浏览器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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