Gulp-ruby-sass的使用心得

安装ruby

1、安装ruby和sass

在windows下利用Gulp-ruby-sass编译sass，需要安装ruby和sass，安装过程请参考[sass安装][1]，这个过程是必须的，不然在gulp里执行sass编译时没有任何变化，也不会报任何错误提示。如果你也遇到这种情况，可以照着教程安装ruby和sass,然后在重启一下命令行工具。

2、安装gulp和gulp-ruby-sass,前提是已经安装了node环境。打开node.js command prompt里执行相应命令。

安装gulp

//全局安装
npm install --global gulp
//在项目下安装
npm install --save-dev gulp

安装gulp-ruby-sass插件

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

编译sass

1、创建gulpfile.js文件，编写如下代码：

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

gulp.task('sass', function () {
    return sass('app/scss/main.scss')
        .on('error', function (err) {
            console.error('Error!', err.message);
        })
        .pipe(gulp.dest('app/css'));
});

2、在命令行执行如下命令

gulp sass

2、更多，为了能够实时编译sass，我们可以利用gulp watch命令，每当sass文件更改时自动编译sass,代码如下：

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var tinylr = require('tiny-lr'),               //livereload
    server = tinylr(),
    port = 35729;

gulp.task('sass', function () {
    return sass('app/scss/main.scss')
        .on('error', function (err) {
            console.error('Error!', err.message);
        })
        .pipe(gulp.dest('app/css'));
});

gulp.task("watch", function(){
    server.listen(port, function(){
        gulp.watch('app/scss/main.scss', function(){
            gulp.run('sass');
        });
    });
});

3、然后在命令行执行如下命令。

gulp watch

参考文档：
1、http://www.zuojj.com/archives/550.html
2、http://www.gulpjs.com.cn/docs/getting-started/
3、http://www.w3cplus.com/sassguide/install.html