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了。