LESS/Sass/CSSのごった煮コンパイル (gulp版)

gulp.jsでは、複数のソースから別々の処理をさせた上で、途中で合流させて1ファイルにコンパイルすることも可能です。

例えば、こんなふたつ↓をコンパイルすることを考えます。

• 軽量化してLessの変数をカスタマイズしたbootstrap
• Smacssで書かれたピュアCSSのプロジェクト

ここでは公式のレシピを参考に、streamqueueでストリームを合流させてみました。streamqueueは順序を保持するので、結合順は常に bootstrap > smacss になります。

gulp         = require 'gulp'
less         = require 'gulp-less'
cssimport    = require 'gulp-cssimport'
autoprefixer = require 'gulp-autoprefixer'
concat       = require 'gulp-concat'
minifyCss    = require 'gulp-minify-css'
streamqueue  = require 'streamqueue'

gulp.task 'css', ->
  streamqueue objectMode: true,
    gulp.src ['css/src/bootstrap.less'] # 独自設定のbootstrap
    .pipe less paths: ['bower_components/bootstrap/less/'] # 検索パスにbowerを追加
    gulp.src ['css/src/smacss.css'] # ピュアCSSのプロジェクト
    .pipe cssimport() # @importの読み込み
    .pipe autoprefixer 'last 2 versions' # プリフィクサ
  .pipe concat 'style.css' # 2つのCSSを結合
  .pipe minifyCss keepSpecialComments: 0 # ミニファイ、コメントも除去
  .pipe gulp.dest 'css/' # CSSディレクトリに出力

上記は、LESS+CSSですが、Sassの組み合わせだろうと全然OKです。

Node.jsの知識が若干必要になりますが、ストリームの分岐・合流のある場合でも中間ファイルを生成する必要がないのは、gulp.jsの利点です。