当前位置

网站首页> 程序设计 > 开源项目 > 程序开发 > 浏览文章

gulp-ruby-sass与gulp-sass

作者:小梦 来源: 网络 时间: 2024-05-21 阅读:

毕业后一直从事js这一块的工作,没有写过css,对css的了解程度还停留在学校自学时的水平。基本功太差,最近开始深入学习了。

了解到sassless比较流行,决定选一个,这俩的优劣就不讨论了。我选的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文件内容读取成streampipegulp任务内定义的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-sassgulp-sass的区别就在于编译器的不同和编译过程不同。

  • gulp-ruby-sass是调用sass,所以需要ruby环境,需要生成临时目录和临时文件

  • gulp-sass是调用node-sass,有node.js环境就够了,编译过程不需要临时目录和文件,直接通过buffer内容转换。

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