了解到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源码了。大致了解了这个插件的原理，如下：

导致问题的原因就是这第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的区别就在于编译器的不同和编译过程不同。

搞定这个问题后，就可以愉快地使用了，我又能继续学习css了。