gulp livereload實現sass實時編譯及瀏覽器自動刷新
首先gulp是基於Node的,所以確保你已經安裝 node.js,在Nodejs官方網站下載跟自己操作系統相對應的安裝包。
先說一下gulp安裝流程:
1:全局安裝gulp,操作為: npm install gulp -g;
2:在根目錄下創建 package.json文件,操作為:npm init,之后根據操作輸入“名字,版本號,描述”等內容,直接按回車則使用默認值,最后根據提示輸入YES即可;輸完后根目錄下多了個package.json文件;
3:本地安裝gulp,先進入你的項目所在,如d盤下的myproject/app
d: 進入D盤;
cd myproject/app 進入myproject下面的app文件夾;
然后在當前項目根目錄下輸入:
npm install --save-dev gulp;
可以發現我們安裝了2次,全局安裝gulp是為了執行gulp任務,本地安裝gulp則是為了調用gulp插件的功能。
4.根目錄下創建 gulpfile.js,此為配置文件,有關gulp的任務都寫在里面,后面再講。
至此,gulp的基本安裝就已經結束,下面來安裝gulp插件,有關的常用插件像代碼壓縮,圖片壓縮,重命名等還是比較多的,可以去npm上找,再次就不舉例了,本文只用簡單介紹自動刷新相關插件,(本想sass實時編譯成css再自動刷新的)
先按照服務器插件:
livereload需要在服務器上運行,可以先npm install http-server -g;裝一個插件,如果你有自己的本地服務器也行;
如果系統是win10或者8, 可能會出錯,退出Node再以管理員的身份打開,重新安裝即可;
安裝完然后輸入http-server,出現此圖片代表啟用服務成功;由於啟用后就沒法進行其他操作了(難道是我的問題?),所以再打開一個 node(反正又不要錢)
裝完后以服務器環境打開文件,默認地址為 http://192.168.0.110:8080 (要找到html文件位置)
接着安裝sass編譯插件,npm install --save-dev gulp-ruby-sass (電腦必須已安裝Ruby環境,如果沒有可以則安裝gulp-sass插件,64位系統下安裝可能會出錯,據我查資料說是2進制的問題,表示一臉懵逼)
再安裝livereload插件:
npm install gulp gulp-livereload -g
安裝完后cd進入項目所在位置輸入livereload
需要的文件都裝好后,就可以來寫上面的 gulpfile.js配置文件了;
//引入插件
var gulp = require("gulp");
var livereload = require("gulp-livereload");
var sass = require("gulp-ruby-sass");
//執行任務,意思為監聽src下的所有文件,發現有變動即刷新瀏覽器,根據自己的文件目錄寫監聽的位置
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);
}
);
});
為了讓瀏覽器自動刷新還需要裝一個chrome的插件,但由於要翻牆就算了,以下面的方案代替:
在index.html中引入一下script標簽
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')
</script>
至此就可以正常搞起,親測可用。 有雙屏的寫起來爽很多,只要ctrl+s保存就你懂得!!!!呵呵呵呵。
gulp.task是gulp的api之一,作用為定義任務,有關其他的api像src watch pipe dest什么的就大家自己研究了。
研究了3個多小時,大家要是能用了就點個贊。有什么問題可以咨詢一下我,我要是懂得就幫你解答一下,不懂得我也沒辦法,本人也就剛工作一個月的水平,還是比較水的,哪里寫錯了大家見諒一下。