前端自動化之sass實時編譯及自動刷新瀏覽器


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個多小時,大家要是能用了就點個贊。有什么問題可以咨詢一下我,我要是懂得就幫你解答一下,不懂得我也沒辦法,本人也就剛工作一個月的水平,還是比較水的,哪里寫錯了大家見諒一下。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM