gulp本の紹介

## gulpとわたし

gulpの前は[Grunt](http://gruntjs.com/)を使っていた。gulp歴1年ほどで過去に30プロジェクトくらいのscaffold用のgulpファイルを書いたり、[Brunch](http://brunch.io/)からgulpへ移行したり。[gulp-iconv](https://github.com/minodisk/gulp-iconv)など幾つかのgulpプラグインをメンテしてる。

## gulp本とは

[Bleeding Edge Press](http://bleedingedgepress.com/) から出版されている [Developing a gulp Edge](http://buff.ly/1a0N1Yo) を献本して頂いた。Bleeding Edge Press は複数人のチームでコラボレートして旬な技術のEBookを発行している出版社。[O'Reilly Media](http://shop.oreilly.com/product/9781939902146.do) でも取り扱いがある。
おそらく現時点では唯一のgulp本ではなかろうか。

## gulp本が対象としている読者

nodeのインストールからプラグインの作成方法まで取り扱っていて、gulpを使ったことのないユーザーからgulpのヘビーユーザーまで全gulpユーザーをターゲットにしている。

## レビュー

単なるgulpの取説というよりは、各章とも必ず一歩踏み込んだtipsを取り込んでいるという印象で、既にgulpを使っているというユーザにも新たな発見がありそう。また、扱っている内容も[BrowserSync](http://www.browsersync.io/)などトレンド感があり、試したくなるものになっている。

gulpでどのようなタスクを自動化できるのかというユースケースから、`gulp.task`, `gulp.src`, `gulp.dest` に始まる基本的な使い方、環境でビルドのオプションを切り替える実践的な使い方など、網羅的に解説している。実践編ではnodeのモジュールとの連携を実例と共に紹介していて、すぐにでもプロジェクトに適用できる内容となっている。最終章ではgulpプラグインの作り方について説明しており、プラグインの設定からプラグインを作る上で避けて通れないモジュールの[through2](https://github.com/rvagg/through2)の使い方や[vinyl](https://github.com/wearefractal/vinyl)のファイルオブジェクトについての解説がある。

## 内容の紹介

どのような内容が掲載されているか、Chapter毎にざっくりと紹介する。

### Preface

この本についての説明。

- gulpを使う理由
- この本を書いた理由
  - [Getting Started](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md)や[API documentation](https://github.com/gulpjs/gulp/blob/master/docs/API.md)は小さすぎる
  - [recipes](https://github.com/gulpjs/gulp/tree/master/docs/recipes#recipes)には例がたくさんあって素晴らしいが説明が不足している
- この本を読む上で必要な知識
- 本に出てくるExampleプロジェクトとExampleプラグインのリポジトリの紹介
- "book sprint"という作業フローでかかれている事
- 筆者達の紹介

### CHAPTER 1: Introducing gulp

gulpのユースケースやgulpを使うメリットなど、多方向から導入している。プロジェクトにgulpを導入したい、ビルドシステムをgulpに変更したい方に必要な情報が書かれている。

- [npm](https://www.npmjs.com/)にたくさんのgulpプラグインが存在している
- gulpの特徴であるstream処理を支えている[through2](https://github.com/rvagg/through2)と[vinyl-fs](https://github.com/wearefractal/vinyl-fs)について
- gulpのタスクの依存を解決している[orchestrator](https://github.com/orchestrator/orchestrator)について
- gulpでできることの例。AltJSからの変換・CSSの処理・リント・テストなど、他にもたくさんの例がコード付きで示されている
- [Grunt](http://gruntjs.com/), [Broccoli](https://github.com/broccolijs/broccoli), [Brunch](http://brunch.io/) などの他のビルドシステムと比較しつつ、gulpの優れている点を挙げている。
  - gulpのAPIの習得しやすさについて
  - 簡単に使えることを[Grunt](http://gruntjs.com/)　の設定ファイルとgulpの設定ファイルの比較で例示
  - gulpがstreamを用いることでどのように効率がよくなっているか
  - プラグインの開発にガイドラインが存在し、コミュニティが高クオリティのプラグインを揃えようとしていること

### CHAPTER 2: Installing gulp

gulpを使うまでの準備。gulpを初めて使う方はここから読み始めるとよさそう。

- nvmを使ったNodeのインストール
- npmを使ったgulpのインストール
- gulpで Hello world

### CHAPTER 3: Your first gulp project

gulpの基本的な使い方。

- `gulp.src`から`pipe`して`gulp.dest`することでファイルがコピーされる。（`pipe`とは何なのかを感覚的に把握できる。）
- [glob](https://github.com/isaacs/node-glob)形式のファイルの指定方法
  - 複数ファイルを設定する方法
  - 拡張子関係なく指定する方法と複数の拡張子を指定する方法
  - 最初のサブディレクトリ内のファイルを指定する方法と、再帰的なサブディレクトリのファイルを指定する方法
  - ファイルを除外する方法
- `gulp.src`には複数の[glob](https://github.com/isaacs/node-glob)を指定することができる。
- 単純なタスクを作ってみる。
- `gulp.watch`でファイルを監視し、タスクを自動的に走らせる。

### CHAPTER 4: gulp in action

実際のプロジェクトにありそうな構成でタスクを作っていく。

- プロジェクトの概要
- Step 1: プロジェクトのセットアップ
- Step 2: 静的なファイルをコピーするタスク
- Step 3: [Sass](http://sass-lang.com/)をCSSに変換するタスク
- Step 4: [Browserify](http://browserify.org/)のタスク
- Step 5: ローカル開発用に[Express](http://expressjs.com/)サーバを立てる
- Step 6: ビルドを自動化する
  - タスクを纏める
  - ファイル監視する
  - デフォルトタスクを作る
- Step 7: エラーハンドリング（[gulp-plumber](https://github.com/floatdrop/gulp-plumber)にも触れられているがここではプラグインを使わずに基本的なエラーハンドリングを実装することでstreamにかかわらないロギングへの応用ができそう）
  - [Sass](http://sass-lang.com/)のエラーを表示する
  - [Browserify](http://browserify.org/)のエラーを表示する
- Step 8: [Express](http://expressjs.com/)サーバと[BrowserSync](http://www.browsersync.io/)を連携する
  - [BrowserSync](http://www.browsersync.io/)のインストールする
  - 任意のタイミングで[BrowserSync](http://www.browsersync.io/)をリロードする
- Step 8: プロダクションビルド用にminifyする
  - 環境を引数で指定できるように[minimist](https://github.com/substack/minimist)を使いコマンドラインのオプションをパースする
  - CSSをminifyする
  - JavaScriptをminifyする
- Step 9: 開発用にソースマップを出力する
  - CSS用のソースマップを出力する
  - [Browserify](http://browserify.org/)でJavaScript用のソースマップを出力する
- Step 10: 完成
- おまけ: キャッシュバスターについて
  - なぜキャッシュバスターが必要か
  - キャッシュバスターをどのように自動化するか
  - [gulp-cachebust](https://github.com/Josiah/gulp-cachebust)の使い方
  - タスクを直列的に走らせる[run-sequence](https://github.com/OverZealous/run-sequence)の導入

### CHAPTER 5: Advanced gulp techniques

応用的なgulp設定をする。実際の運用で出てくる問題を解決する可能性がある。

- [gulp-load-plugins](https://github.com/jackfranklin/gulp-load-plugins)でgulpのプラグインをオートロードする
- 条件によってタスク内容を切り替える方法
- タスクをファイルに分割する方法
- [gulp-jshint](https://github.com/spalger/gulp-jshint)とそのリポーターの設定方法
- [gulp-filter](https://github.com/sindresorhus/gulp-filter), [gulp-cached](https://github.com/wearefractal/gulp-cached), [gulp-remember](https://github.com/ahaurw01/gulp-remember) を使ってビルドを高速化する方法
- [Compass](http://compass-style.org/)を使う方法
- [gulp-uncss](https://github.com/ben-eb/gulp-uncss)や[gulp-csso](https://github.com/ben-eb/gulp-csso)を使ったCSSの軽量化
- [recipes](https://github.com/gulpjs/gulp/tree/master/docs/recipes)サイトの紹介

### CHAPTER 6: Writing a plugin

実際にプラグインを作りながら、プラグインに必要なことを取り上げる。

- プラグイン作成時のガイドライン
- 何もしないプラグインを作ってみる
- エラーハンドリング
- プラグインの命名
- 引数を受ける
- [through2](https://github.com/rvagg/through2)でstreamオブジェクトを作る
- [vinyl](https://github.com/wearefractal/vinyl)のfileオブジェクトの説明
- バッファモードとストリームモード、どちらかのモードをサポートしない場合の処理
- バッファモードの扱い
- ストリームモードの扱い
- [Mocha](http://mochajs.org/), [Chai](http://chaijs.com/) を使ったテストの書き方を8ページほど使って詳しく解説
- [Travis CI](https://travis-ci.org/)の設定方法と、テスト結果のバッジについて
- [gulp-istanbul](https://github.com/SBoudrias/gulp-istanbul)でのコードカバレッジと[Coveralls](https://coveralls.io/)へのサブミット

### Appendix

カテゴリ別のプラグイン紹介。

- タスク作成用のプラグイン
- コードを整理するプラグイン
- コードを結合するプラグイン
- カバレッジのプラグイン
- 依存解決するプラグイン
- インクリメンタルビルドするプラグイン
- リントするプラグイン
- minifyするプラグイン
- テンプレート言語を変換するプラグイン
- テストのプラグイン
- Alt言語を変換するプラグイン
- 筆者がよく使うプラグイン

## 感想

**すごく濃いです。**

## お知らせ

日本語への翻訳者を探しているので興味があれば連絡が欲しいとのこと。 :mailbox_with_mail: