gulp-ruby-sass與gulp-sass

畢業後一直從事js這一塊的工做，沒有寫過css,對css的瞭解程度還停留在學校自學時的水平。基本功太差，最近開始深刻學習了。

瞭解到sass和less比較流行，決定選一個，這倆的優劣就不討論了。我選的sass，由於和ruby比較親。

日常寫sass的時候保存即編譯這個是頗有必要的，但最近我一直在用visual studio code開發，這個編輯器還不太成熟，不支持編譯sass的功能，只能本身寫腳本去搞了。

用gulp來幹這活沒什麼可說的，npm上搜了一下，看中了gulp-ruby-sass，由於機器上裝了ruby環境。接下來的劇本就是安裝很順利，使用很瀟灑。

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var group = require('gulp-group-files');

var sassFiles = {
    "xxx" : {
        src: "./xxx/styles/sass/index.scss",
        dest: "./xxx/styles/"
    }
};

gulp.task('sass:compile',function (){
    return group(sassFiles,function (key,fileset){
        return sass(fileset.src)
            .on('error', function (err) {
                console.error('compile sass file error: %s', err.message);
            })
            .pipe(gulp.dest(fileset.dest));
    })();
});

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

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

代碼看上去很nice吧，沒什麼問題，我還有點沾沾自喜呢。然而，今天遇到了這樣一個怪事，也就是寫這篇文章的由來。

當我把須要構建的項目增長了一項後,就出現了問題。talk is cheap，就直接show u the code了。

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var group = require('gulp-group-files');

var sassFiles = {
    "xxx" : {
        src: "./xxx/styles/sass/index.scss",
        dest: "./xxx/styles/"
    },
    "yyy" : {
        src: "./yyy/styles/sass/index.scss",
        dest: "./yyy/styles/"
    }
};

gulp.task('sass:compile',function (){
    return group(sassFiles,function (key,fileset){
        return sass(fileset.src)
            .on('error', function (err) {
                console.error('compile sass file error: %s', err.message);
            })
            .pipe(gulp.dest(fileset.dest));
    })();
});

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

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

與上面的相比，只是多了一項須要編譯的內容。看上去沒什麼問題，可是呢。編譯生成的xxx/styles/index.css的內容實際爲yyy/styles/index.css,有時也會反過來。

一度懷疑是本身代碼有問題，改了好幾回，問題依舊。沒辦法，只好去看gulp-ruby-sass源碼了。大體瞭解了這個插件的原理，以下：

1. 建立臨時目錄，用來存放編譯生成的css文件；

2. 調用sass命令，編譯生成的css文件先放在臨時目錄；

3. 將css文件內容讀取成stream，pipe到gulp任務內定義的gulp.dest,這樣就完成了scss文件的編譯和css文件的生成；

4. 將臨時目錄和臨時文件刪除

致使問題的緣由就是這第4步的刪除臨時文件和目錄，連續編譯多個文件時只生成了一個臨時目錄，而第一個文件編譯成功後臨時目錄被刪除，後續的文件讀取就會出錯。根據操做的耗時，可能會取現如下狀況：

1. 兩個文件中只有一個編譯成功

2. 兩個文件內容相同（若是文件名相同）

3. 文件內容不符
   ...

瞭解到gulp-ruby-sass的執行過程後，決定棄用，緣由就是上面所列的問題，不想改本身的代碼了。

繼續npm上搜索，找到了gulp-sass。

npm install --save-dev gulp-sass，一番等待後，npm報錯了。

wtf!!!好吧，就當是好事多磨吧。從npm-debug.log中能夠看出，gulp-sass依賴了node-sass這個庫。安裝node-sass這個庫的時候要執行一個腳本，而在這個過程當中出錯了，能夠試下管理員身份安裝。

用管理員身份再安裝，此次成功了，而後改下gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var group = require('gulp-group-files');

var sassFiles = {
    "xxx" : {
        src: "./xxx/styles/sass/index.scss",
        dest: "./xxx/styles/"
    },
    "yyy" : {
        src: "./yyy/styles/sass/index.scss",
        dest: "./yyy/styles/"
    }
};

gulp.task('sass:compile',function (){
    return group(sassFiles,function (key,fileset){
        return gulp.src(fileset.src)
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest(fileset.dest));
    })();
});

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

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

經過查看依賴關係以及部分源碼能夠發現，gulp-ruby-sass和gulp-sass的區別就在於編譯器的不一樣和編譯過程不一樣。

• gulp-ruby-sass是調用sass，因此須要ruby環境，須要生成臨時目錄和臨時文件

• gulp-sass是調用node-sass,有node.js環境就夠了，編譯過程不須要臨時目錄和文件，直接經過buffer內容轉換。

搞定這個問題後，就能夠愉快地使用了，我又能繼續學習css了。