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源码了。大致了解了这个插件的原理，如下：
创建临时目录，用来存放编译生成的
css文件；调用
sass命令，编译生成的css文件先放在临时目录；将
css文件内容读取成stream，pipe到gulp任务内定义的gulp.dest,这样就完成了scss文件的编译和css文件的生成；将临时目录和临时文件删除
导致问题的原因就是这第4步的删除临时文件和目录，连续编译多个文件时只生成了一个临时目录，而第一个文件编译成功后临时目录被删除，后续的文件读取就会出错。根据操作的耗时，可能会取现以下情况：
两个文件中只有一个编译成功
两个文件内容相同（如果文件名相同）
文件内容不符
...
了解到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了。