gulpは、destの後にもアクションを繋げられる

gulpのAPIマニュアルにも書かれていますが、gulpでは、gulp.destを書いたからと言って、そこで終わりにする必要はありません。

• 注: 下記、CoffeeScriptで書いてますが、gulpの標準はJavaScriptです。適宜読み替えてください。

例: 複数ディレクトリに出力する

例えば、こんな風に書けば、3つのディレクトリにテキストファイルをコピーできます。

gulp = require 'gulp'

gulp.task 'multi-dist', ->
  gulp.src ['./src/*.txt']
  .pipe gulp.dest './dist1/' # 1つ目のdest
  .pipe gulp.dest './dist2/' # 2つ目のdest
  .pipe gulp.dest './dist3/' # 3つ目のdest

例: minifyの前後でファイルを2つ出力する

gulp = require 'gulp'
coffee = require 'gulp-coffee'
rename = require 'gulp-rename'
uglify = require 'gulp-uglify'

gulp.task 'scripts', ->
  gulp.src ['./src/coffee/*.coffee']
  .pipe coffee()
  .pipe gulp.dest './dist/js/' # 1つ目のdest
  .pipe uglify()
  .pipe rename extname: '.min.js'
  .pipe gulp.dest './dist/js/' # 2つ目のdest

例: パスを書き換えたものを別ディレクトリに出力する

プロダクション用のファイルを一旦出力しつつ、プレビュー用のHTMLを別ディレクトリに出力する例を考えます。この例では、/dist/html/に出力後、HTMLから参照するファイルのパスを調整して、プレビューしやすいものを/test/preview/に生成しています。

gulp = require 'gulp'
replace = require 'gulp-replace'
slim = require 'gulp-slim'

gulp.task 'slim', ->
  gulp.src ['./src/slim/*.slim']
  .pipe slim pretty: true
  .pipe gulp.dest './dist/html/' # 1つ目のdest
  .pipe replace '/css/style.min.css', '/css/style.css' # CSSだけ、minify前のものに
  .pipe gulp.dest './test/preview/' # 2つ目のdest

gulpのコマンドは基本全部ストリーム

gulpプラグインは、"passthrough stream"であることが基本です。ストリームを受け渡す事で、Node.jsの作法に従いながらアクションを繋いで行く事を信条にしていて、gulp.destも同様の精神で作られています。なので、gulp.destの後に他のプラグインを繋げる事は特に不思議ではないのです。

ちなみに、gulp.srcについても"passthrough"にすべきという議論が、暫く前にissueとして上がっていました。今後のバージョンで、そうなる可能性は高そうです。