FED实验室 - 专注WEB端开发和用户体验

Gulp-ruby-sass

AUTOMATION CSS预处理 煦涵 11486℃ 0评论

gulp-ruby-sass基于ruby和sass,编译Sass文件为 CSS文件。
特点:比gulp-sass,但是更稳定,功能更丰富。

一、安装

$ npm install --save-dev gulp-ruby-sass

需要先安装Ruby和Sass,如果你是OSX和Linux系统可能已经有Ruby,你可以在终端使用ruby -v测试。当你确定Ruby已安装,运行gem install sass 安装Sass。

二、使用

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

gulp.task('default', function () {
    return gulp.src('src/scss/app.scss')
        .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
        .pipe(gulp.dest('dist/css'));
});

gulp.src()中增加你需要编译的文件。
使用gulp-watch自动重编译你的文件,当你编辑文件的时候。
Windows用户注意:
所有的Sass选项期望unix路径分隔符(/),如果你设置路径动态的,需要使用slash转换。

三、API

1.sourcemap:
@type: Boolean
@default: false
sourcemap可用:需要Sass>=3.3.0 和 sourcemapPath选项。

2.sourcemapPath:
@type: String
A relative path from the output CSS directory to the Sass source directory as seen by your web server.

Because gulp-ruby-sass can't know your CSS destination directory or your server setup you have to give a little extra information to help the browser find sourcemaps.

因为gulp-ruby-sass 不知道你的CSS目录 或者你服务安装目录,你不得不给一些额外的信息来帮助浏览器找到sourcemaps.

Examples:
If source is site/scss, destination is site/css, and you're serving from site: { sourcemapPath: '../scss' }.
If source is app/styles, destination is .tmp/styles, and you're serving both .tmp and app: { sourcemapPath: '.' }.
例如:
1)
源:site/scss,目的:site/css
{sourcemapPath: "../scss"}
2)
源:app/styles,目的:.tmp/styles
{sourcemapPath: "."}

3.trace
@type: Boolean
@default: false
显示一个完整回溯的错误。

4.unixNewlines
@type: Boolean
@default: false on windows,其它默认为true
写入文件时,使用unix形式的换行。

5.check
@type: Boolean
@default: false
只检查语法,不反馈结果。

6.style
@type: String
@default: nested

Sass to CSS 的输出样式:nested,compact,expanded,compressed。

7.precision
@type: Number
@default: 3
当输出十进制数字时,使用多少位的精度。

8.quiet
@type: Boolean
@default: false
编译期间是否提示警告和状态信息。

9.compass
@type: Boolean
@default: false
Make Compass imports available and load project configuration (config.rb located close to the gulpfile.js)

10.debugInfo
@type: Boolean
@defult: false
输出可以使用Firebug的Firesass插件

11.lineNumbers
@type: Boolean
@default: false
是否在生成的CSS文件中添加注释,指定对应的源代码行。

12.loadPath
@type: String|Array
一个或多个Sass导入路径,相对gulpfile.js文件。

13.require
@type: String|Array
编译Sass前,需要依赖的一个或多个Ruby库。

14.cacheLocation
@type: String
@default: .sass-cache
这个路径放置被缓存的Sass文件。

15.noCache
@type: Boolean
@default: false
是否缓存Sass文件。

16.bundleExec
@type: Boolean
@default: false
使用bundle exec运行sass: bundle exec sass。

英文地址:
https://github.com/sindresorhus/gulp-ruby-sass

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (2)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址