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