安装ruby
1、安装ruby和sass
在windows下利用Gulp-ruby-sass编译sass,需要安装ruby和sass,安装过程请参考[sass安装][1],这个过程是必须的,不然在gulp里执行sass编译时没有任何变化,也不会报任何错误提示。如果你也遇到这种情况,可以照着教程安装ruby和sass,然后在重启一下命令行工具。
2、安装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
1、创建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'));
});
2、在命令行执行如下命令
gulp sass
2、更多,为了能够实时编译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');
});
});
});
3、然后在命令行执行如下命令。
gulp watch
参考文档:
1、http://www.zuojj.com/archives/550.html
2、http://www.gulpjs.com.cn/docs/getting-started/
3、http://www.w3cplus.com/sassguide/install.html