gulp 實現sass自動化 ，監聽同步

實現功能

　　監聽scss文件　　

　　sass自動化

准備條件

　　1 .安裝gulp

　　　　npm init   ---->一直enter，會在當前目錄下生成一個package.json文件,記錄安裝的依賴模塊

　　　　npm install gulp --save-dev  

　　2 .安裝gulp-ruby-sass

　　　　npm install gulp-ruby-sass 

　　　　你還需要安裝ruby環境 ，具體看http://www.cnblogs.com/NTWang/p/6284769.html  的2.2模塊

　　3 .創建gulpfile.js文件

上述都搞定！

創建文件

　　

gulpfile.js 文件

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

gulp.task('sass', function(){
    return sass('scss/index.scss')// 編譯文件
        .on('error', sass.logError) // 錯誤信息
        .pipe(gulp.dest('css'));//輸出路徑
    }
);

gulp.task('dist',function(){
    gulp.watch('./scss/*.scss',['sass']);// 監聽的文件
});

在控制台運行：

　　gulp dist

scss ---》css

 

這樣就使用了gulp實現的sass自動化