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言語を変換するプラグイン
- 筆者がよく使うプラグイン
感想
すごく濃いです。
お知らせ
日本語への翻訳者を探しているので興味があれば連絡が欲しいとのこと。 