今天要來介紹 gulp-sass 如何安裝與使用

gulp-sass 介紹
https://www.npmjs.com/package/gulp-sass

安裝:

1. 終端機輸入 npm install gulp-sass --save
   node-sass 為 gulp-sass 的相依套件，安裝 gulp-sass 的同時會連同 node-sass 一起安裝
   代表本地端只須執行安裝 gulp-sass 的指令即可。
   

2. 載入 gulp-sass 套件
   

gulp.task('sass', function () {
    return gulp.src('./source/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
});

這裡輸入完後 在終端機輸入 gulp sass
會發現 我們的 scss檔會編譯成 css檔並放在 css資料夾內
4. watch 監控
監控 "./source/scss/**/*.scss " 此資料夾

若內容有變更 則執行後面 ['sass'] 指令

gulp.task('watch', function () {
    gulp.watch('./source/scss/**/*.scss', ['sass']);
});

接著在終端機 輸入 gulp watch
會發現
假如我們有變更 scss檔的內容
ex:

$primary-color : red;
body{
    background-color: $primary-color;
}

改成 blue
會即時的監控並輸出css檔

scss:

$primary-color : blue;
body{
    background-color: $primary-color;
}

css:

body {
  background-color: blue; }

那現在我們已經有 3個任務了(jade sass watch)
我們可以把任務合併

gulp.task('default',['watch','jade','sass']);

然後在終端機 輸入 gulp
就可以一次執行這三個任務啦~~

不過 gulp 停止的方式有兩個狀況
一個是我們在終端機 輸入 ctrl +c
一個是編譯錯誤 會自動停止

但假如我們不想要它停止
可以再安裝另一個套件
gulp-plumber

1. npm install gulp-plumber --save
2. 加入 var plumber = require('gulp-plumber');
3. 在資料來源下補上 .pipe(plumber())

最後附上今天介紹的程式碼

var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');

gulp.task('jade', function() {
    gulp.src('./source/**/*.jade')
    .pipe(plumber())
    .pipe(jade({
        pretty: true
    }))
    .pipe(gulp.dest('./public/'))
});
gulp.task('sass', function () {
    return gulp.src('./source/scss/**/*.scss')
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
});
gulp.task('watch', function () {
    gulp.watch('./source/scss/**/*.scss', ['sass']);
});
gulp.task('default',['jade','sass','watch']);

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷