Gulp-ruby-sass的使用心得

安装ruby

一、安装ruby和sass

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

二、安装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

一、建立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'));
});

二、在命令行执行以下命令

gulp sass

二、更多，为了可以实时编译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');
        });
    });
});

三、而后在命令行执行以下命令。

gulp watch

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