使用gulp-sass 和 gulp-livereload 自動編譯sass文件

吐槽

前面我也說過了，出來實習幾個月，被前端磨得快沒脾氣了，特別是寫css 時 不停的F5 -> 切換.. 循環 W(￣_￣)W，使用 gulp 前端自動化很好的解決了這個問題。

在這篇blog中不止介紹 gulp-sass 還有一款 gulp-livereload ，兩個插件配合使用，簡直爽爆了 (≧▽≦)/。

gulp-sass

簡介： gulp-sass 是一款編譯sass 的插件，只需要一行命令行 就能自動編譯sass文件 :-) 夠簡短吧~

gulp-livereload

簡介：gulp-livereload 當監聽的文件變化時自動刷新。

搭建簡單的環境以及初始化項目

第一步當然是構建項目,爲了不讓博客冗長，不易閱讀，我分步驟的將博客劃分開
查看：初始化項目博客

接着在 根目錄下創建文件夾以及scss文件

然後下載 gulp-sass 和 gulp-livereload 插件

npm install gulp-sass --save-dev 

npm install gulp-livereload  --save-dev

http-server 服務器

自動刷新功能需要配合服務器，所以在這裏我使用http-server 作爲服務器

npm install http-server -g

運行http-server

關鍵：gulpfile.js 配置文件

顧名思義，gulpfile.js文件就是 gulp 的配置文件拉，

第一步，先創建gulpfile.js 配置文件

第二部，打開文本編輯器
輸入一下代碼

'use strict'
var gulp=require('gulp'),  //引入 gulp 插件
    sass=require('gulp-sass'), //引入 gulp-sass 插件
    livereload=require('gulp-livereload'); //引入gulp-livereload 插件

gulp.task('sass',function(){ //創建一個任務 名叫 cass ,定義一個匿名函數
    console.log("編譯sass");
    return gulp.src('src/**/*.scss') //定義源文件
    .pipe(sass()) //調用sass 插件的方法，預編譯sass文件
    .pipe(gulp.dest('dist/css')) //輸出到dist文件夾下的css文件夾中
});

gulp.task('watch',function(){  //創建一個任務 名叫 watch,定義一個匿名函數
    livereload.listen(); //關聯服務器
    gulp.watch('src/**/*.scss',['sass']); //監察sass src文件夾中的scss 格式的文件是否被改動，是的話執行sass 任務編譯他
});

接着在git中輸入命令行：

gulp watch

安裝 谷歌流浪器的 livereload 插件

需要翻牆的 livereload 插件

下載完成後，瀏覽器有上角會有一個圖標

接着只要ctrl+s 保存 sass 文件就會自動刷新頁面了。