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 文件
1 var gulp = require('gulp'); 2 var sass = require('gulp-ruby-sass'); 3 4 gulp.task('sass', function(){ 5 return sass('scss/index.scss')// 编译文件 6 .on('error', sass.logError) // 错误信息 7 .pipe(gulp.dest('css'));//输出路径 8 } 9 ); 10 11 gulp.task('dist',function(){ 12 gulp.watch('./scss/*.scss',['sass']);// 监听的文件 13 });
在控制台运行:
gulp dist
scss ---》css
这样就使用了gulp实现的sass自动化