Gulp系列教程：使用Sass（和Compass）编写CSS

这是Gulp系列教程的第四部分。今天我会展示如何使用Sass（和Compass如果你愿意）来创建CSS文件。另外我会使用Autoprefixer来添加浏览器前缀并创建Source Maps使得Sass文件调试更方便。

到目前为止，Compass已停止更新很久了，在实际项目中个人不建议使用Compass。

SASS以及AUTOPREFIXER

我使用Sass作为CSS预处理器。如果你喜欢使用Compass，只需要给这个任务设置一个选项。

继续安装所需的npm模块：

$ npm install --save-dev gulp-plumber@1.0.1 gulp-ruby-sass@2.0.4 gulp-filter@3.0.1 gulp-changed@1.0.0 gulp-autoprefixer@3.0.2 gulp-sourcemaps@1.6.0

插件很多，但是这个任务会做很多事情。

sass: {
  src:  srcAssets + '/scss/**/*.{sass,scss}',
  dest: developmentAssets + '/css',
  options: {
    noCache: true,
    compass: false,
    bundleExec: true,
    sourcemap: true
  }
},
autoprefixer: {
  browsers: [
    'last 2 versions',
    'safari 5',
    'ie 8',
    'ie 9',
    'opera 12.1',
    'ios 6',
    'android 4'
  ],
  cascade: true
}

var gulp         = require('gulp');
var plumber      = require('gulp-plumber');
var browsersync  = require('browser-sync');
var sass         = require('gulp-ruby-sass');
var gulpFilter   = require('gulp-filter');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps   = require('gulp-sourcemaps');
var config       = require('../../config');

/**
 * Generate CSS from SCSS
 * Build sourcemaps
 */
gulp.task('sass', function() {
  var sassConfig = config.sass.options;

  sassConfig.onError = browsersync.notify;

  // Don’t write sourcemaps of sourcemaps
  var filter = gulpFilter(['*.css', '!*.map'], { restore: true });

  browsersync.notify('Compiling Sass');

  return sass(config.sass.src, sassConfig)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(autoprefixer(config.autoprefixer))
    .pipe(filter) // Don’t write sourcemaps of sourcemaps
    .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: 'app/_assets/scss' }))
    .pipe(filter.restore) // Restore original files
    .pipe(gulp.dest(config.sass.dest));
});

我加载所有含*.sass和*.scss后缀的文件。第一步我通过Plumber流式载入文件。这会保持Gulp.js运行即便在某个文件中有语法错误。通常遇到错误会崩溃。下一步是创建CSS文件。运行sass命令。我创建了source maps并最终把CSS文件放到目标位置。

并且我通过Autoprefixer来生成CSS文件，它会添加浏览器前缀。我用Compass的Mixins很长一段时间了，但是现在我不用了而是纯写CSS。所有想要支持的浏览器前缀都会被加上。

也许你已经猜到了：如果想用Compass，只要把compass选项设为true。

源代码

在Github上查看源码

总结

这是Gulp系列教程的第四部分的总结。我们学习了如何保持Gulp.js运行，即便发生了错误，如果使用Sass来处理SCSS文件，创建Source Maps文件并给CSS文件添加浏览器前缀。

本文根据@Stefan Imhoff的《Introduction to Gulp.js 4: Creating CSS with Sass (and Compass)》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://stefanimhoff.de/2014/gulp-tutorial-4-css-generation-sass/。