GulpでCompassのビルドとCSSの最適化＆圧縮する決定版

前提

• 現在GulpでSassやLessやCompassを使っている人向け
• より最適なCSS出力をしたい人向け
• 下記のディレクトリ構造を仮定

project
- scss
- css
- .csscomb.json
- config.rb
- gulpfile.js
- package.json

モジュールインストール

npm i gulp-plumber -D
npm i gulp-compass -D
npm i gulp-csscomb -D
npm i gulp-autoprefixer -D
npm i gulp-clean-css -D

gulpfile.js

var gulp = require('gulp');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var cleancss = require('gulp-clean-css');

// compass
gulp.task('compass', function(){
    gulp.src('scss/*.scss')
    .pipe(plumber())
    .pipe(compass({
        config_file: 'config.rb',
        comments: false,
        css: 'css/',
        sass: 'scss/'
    }))
    .pipe(csscomb())
    .pipe(autoprefixer())
    .pipe(cleancss())
    .pipe(gulp.dest('dist'));
});

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

gulp.task('default', ['watch']);

大まかには下記のことをやっています。

1. Compassのコンパイルして
2. csscombにかけてフォーマットを整えて
3. ベンダープレフィックスをチェックして
4. Minifyして出力

gulp-pleeeaseという便利なモジュールもあるようですが、gulp-clean-cssの方が高度な圧縮をしてくれるので使っていません。

.csscomb.json

CSScomb: Build config

こちらから好みのフォーマットを作れます。