ちょっと便利そうだったので備忘録兼ねてご紹介。「gulp generator」はgulpで使用するgulpfile.jsとpackage.jsonに記述するソースを出力してくれるジェネレータで、用意されている各項目を選択したりファイルの読み込み・出力箇所を入力していくだけで簡単に必要なソースを出力してくれます。
サイトにアクセスすると上のイメージのような見栄えになっており、ページ左側で実行したいタスクを選択したりファイルの読み込み・出力箇所を入力して、その結果としてページ右側にgulpfile.jsとpackage.jsonに記述するためのソースが出力されるようになっています。
タスクの選択部分は大きく分けて「css」「js」「html」「その他」の4つに分類されており、上のイメージ（イメージは「css」を選択時）のようにそれぞれファイルのパス指定をする部分と各タスクを選択する項目が用意されています。
よく利用されると思うようなものはひと通り揃っており、下記のようなものが設定できるようになっています。
css
「css」ではまずタスクを実行したいCSSファイルへのパスと書き出しの場所をそれぞれ指定し、その下の項目では具体的にどんなタスクを実行したいかを選択していきます。
項目としては以下のようなものが用意されており、その中で「プリプロセッサーを使用する」については「sass」「less」「stylus」のいずれかを指定可能で、「CSSを結合する」については結合後のファイル名を指定できるようになっています。
- CSSの構文をチェックする
- プリプロセッサーを使用する
- オートプリフィクサーを使用する
- CSSのプロパティ順を整理する
- CSSのメディアクエリを整理する
- CSSを圧縮する
- CSSを結合する
- スタイルガイドを使用する
js
「js」も「css」と同様で、まずはタスクを実行したいJavaScriptファイルへのパスと書き出しの場所をそれぞれ指定し、その下の項目では具体的にどんなタスクを実行したいかを選択していきます。
項目としては以下のようなものが用意されており、その中で「altJSを使用する」については「babel」「coffee」「typescript」「jsx」のいずれかを指定可能で、「JSを結合する」については結合後のファイル名を指定できるようになっています。
- altJSを使用する
- Browserifyを使用する
- JSの構文をチェックする
- JSを圧縮する
- JSを結合する
html
「html」もやはり同様で、まずはタスクを実行したいHTMLファイルへのパスと書き出しの場所をそれぞれ指定し、その下の項目では具体的にどんなタスクを実行したいかを選択していきます。
項目としては以下のようなものが用意されており、その中で「テンプレートエンジンを利用する」については「ejs」「jade」のいずれかを指定できます。
- テンプレートエンジンを利用する
- HTMLを圧縮する
その他
「その他」の項目では上で紹介してきたものと同じように利用されていることが多いタスク項目として以下のようなものが用意されており、BrowserSyncを起動するディレクトリ指定、画像圧縮前後のパス指定、アイコンフォントの名前やパス指定など、それぞれ必要な項目なども使用したいタスクにチェックを入れれば指定できるようになっています。
- 通知：タスク完了時の通知有無
- BrowserSync：BrowserSync利用の有無
- 画像：画像圧縮処理の有無
- アイコンフォント：アイコンフォント作成の有無
ソース生成
画面左側でそれぞれ項目を選択したり記入していくとリアルタイムに右側のソース表示に反映されるので、このタスクを選択するとどのような記述が追加されるのかというのも確認しやすいと思います。
表示はgulpfile.jsとpackage.jsonでタブ切り替えできるようになっており、タスクの選択・指定が完了したらそれらを切り替えて「ソースをコピー」押下すれば出力されている内容をコピーできるので、あとは各ファイルにペーストすればそのまま利用できます。
また、gulpfile.jsとpackage.jsonの両方が必要な場合は「パッケージをダウンロード」ボタン押下で両ファイルをzipでダウンロード可能です。
gulpの場合、あらかじめ自分用でベースとなるようなものを用意しておいて、それを案件毎に調整して使用しているという人も多いと思いますが、いつもとちょっと違ったものだとか簡易的なタスクをすぐ用意したいというときには手軽に作成できて非常に便利なツールではないかと思います。
また、これからgulpを使い始めようという人や慣れたいという人も手始めにこれでgulpfile.jsとpackage.jsonを作ってみたりしてみるのも良さそうですね。