Gulp系列教程:使用Sass(和Compass)编写CSS

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

这是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/

Blueed

现居上海。正在学习前端的道路上,欢迎交流。个人博客:Blueed.me,微博:@Ivan_z3

如需转载,烦请注明出处:http://www.w3cplus.com/workflow/gulp-tutorial-4-css-generation-sass.htmlAir Force 1 Ultra Flyknit 2.0 - Black

如需转载,烦请注明出处:https://www.w3cplus.com/workflow/gulp-tutorial-4-css-generation-sass.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部