因为个人习惯用compass,所以gulp中,还是用compass进行编译scss文件。
1. 使用npm安装gulp-compass
npm install gulp-compass --save-dev
因为我之前已经用了compass created了一个项目,用 config.rb 文件,所以使用 gulp-compass 的 Load config from config.rb
var compass = require('gulp-compass');
// 编译Sass
gulp.task('compass', function() {
gulp.src('./css/training/sass/*.scss') //sass的路径
.pipe(compass({
config_file: './css/training/config.rb', //config.rb的路径
css: './css/', //生成css的目录
sass: './css/training/sass/' //sass的目录
}))
.pipe(gulp.dest('../'));
});
目录结构:
运行结果:
gulp的根目录是 training这个文件夹,css的结构如上图所示。gulp package.json目前还不了解。