css预编译

前面讲了js的预编译，情况差不多，我们也可以通过其他语言先写出一种程序，在编译成css提供给浏览器使用。

目前最流行的也有两种less和sass(scss)。scss是sass的3.0版本，但是写法完全不同，scss更接近css的风格，推荐使用。

gulp-less

文档：https://www.npmjs.com/package/gulp-less

把.less编译成.css，如果你在自己的项目里面是使用.less写的样式，那么可以使用这个插件。

$ npm install gulp-less --save-dev

var less = require('gulp-less');
var path = require('path');

gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

gulp-sass

文档：https://www.npmjs.com/package/gulp-sass

把.sass编译成.css

npm install gulp-sass --save-dev

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

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

gulp-scss

用法其实一样，只不过是专门针对.scss的，其实.sass和.scss是一个东西，可以被同一个编译器编译，所以实际上上面的是gulp-sass也应该是可以编译.scss的。

而且这个插件的作者不再推荐大家使用这个插件。

gulp-ruby-sass

这个插件也是和gulp-sass差不多功能，你可以看下文档：https://www.npmjs.com/package/gulp-ruby-sass

安装sass的一些问题

sass是基于ruby的，也就是说你的电脑上得安装ruby。安装的时候还要在你的系统环境变量中加入ruby的PATH。在windows上安装node-sass也是个经常被吐槽的事情。可以使用淘宝镜像安装，具体看这里。