gulpとわたし

gulpの前はGruntを使っていた。gulp歴1年ほどで過去に30プロジェクトくらいのscaffold用のgulpファイルを書いたり、Brunchからgulpへ移行したり。gulp-iconvなど幾つかのgulpプラグインをメンテしてる。

gulp本とは

Bleeding Edge Press から出版されている Developing a gulp Edge を献本して頂いた。Bleeding Edge Press は複数人のチームでコラボレートして旬な技術のEBookを発行している出版社。O'Reilly Media でも取り扱いがある。
おそらく現時点では唯一のgulp本ではなかろうか。

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

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

レビュー

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

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

内容の紹介

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

Preface

この本についての説明。

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

CHAPTER 1: Introducing gulp

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

npmにたくさんのgulpプラグインが存在している
gulpの特徴であるstream処理を支えているthrough2とvinyl-fsについて
gulpのタスクの依存を解決しているorchestratorについて
gulpでできることの例。AltJSからの変換・CSSの処理・リント・テストなど、他にもたくさんの例がコード付きで示されている
Grunt, Broccoli, Brunch などの他のビルドシステムと比較しつつ、gulpの優れている点を挙げている。
- gulpのAPIの習得しやすさについて
- 簡単に使えることをGrunt　の設定ファイルと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形式のファイルの指定方法
- 複数ファイルを設定する方法
- 拡張子関係なく指定する方法と複数の拡張子を指定する方法
- 最初のサブディレクトリ内のファイルを指定する方法と、再帰的なサブディレクトリのファイルを指定する方法
- ファイルを除外する方法
gulp.srcには複数のglobを指定することができる。
単純なタスクを作ってみる。
gulp.watchでファイルを監視し、タスクを自動的に走らせる。

CHAPTER 4: gulp in action

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

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

CHAPTER 5: Advanced gulp techniques

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

gulp-load-pluginsでgulpのプラグインをオートロードする
条件によってタスク内容を切り替える方法
タスクをファイルに分割する方法
gulp-jshintとそのリポーターの設定方法
gulp-filter, gulp-cached, gulp-remember を使ってビルドを高速化する方法
Compassを使う方法
gulp-uncssやgulp-cssoを使ったCSSの軽量化
recipesサイトの紹介

CHAPTER 6: Writing a plugin

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

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

Appendix

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

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

感想

すごく濃いです。

お知らせ

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