gulp.js その4 プラグイン一覧


gulpで使うプラグインやnpmモジュールをピックアップ

## 更新履歴
* 2016-03-11 更新
* 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files
* 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver
* 2014-06-29 gulp-clean の箇所を修正（[shinnn様](http://qiita.com/shinnn/items/bd7ad79526eff37cebd0)にご指摘いただきました。感謝！m(_ _)m）

## プラグイン

[今は使わない方が良いプラグインリスト - gulpjs/plugins - github](https://github.com/gulpjs/plugins/blob/master/src/blackList.json)
↑要チェック。この記事には未反映

### Webサーバー、ユーティリティ

* [browser-sync](https://www.npmjs.com/package/browser-sync) Webサーバー/ライブリロード
* [~~gulp-webserver~~](https://www.npmjs.org/package/gulp-webserver) Webサーバー/ライブリロード ※browser-syncに乗り換えた
* [~~gulp-connect~~](https://www.npmjs.org/package/gulp-connect) Webサーバー/ライブリロード ※deprecateされた。後継の gulp-webserver を使うこと
* [~~gulp-livereload~~](https://www.npmjs.org/package/gulp-livereload) ライブリロード ※browser-syncに同機能含む
* [gulp-plumber](https://www.npmjs.org/package/gulp-plumber) エラーが起きてもwatchさせているタスクを中断させない
* [gulp-util](https://www.npmjs.org/package/gulp-util) Utility functions for gulp plugins
* [gulp-load-plugins](https://www.npmjs.org/package/gulp-load-plugins) 読み込むgulpプラグインをpackage.jsonに記述できるようにする
* [~~gulp-clean~~](https://www.npmjs.org/package/gulp-clean) ファイル、ディレクトリの削除（再帰的）→ deprecateされた。同等機能の[gulp-rimraf](https://www.npmjs.org/package/gulp-rimraf)もdeprecateされるかも。ファイル・ディレクトリの削除は [gulp.srcは使わず、rimraf/delを使う方法](http://qiita.com/shinnn/items/bd7ad79526eff37cebd0) を使うのが良い
* [gulp-notify](https://www.npmjs.org/package/gulp-notify) Mac,Linux,Windowsに通知メッセージ
* [gulp-cache](https://www.npmjs.org/package/gulp-cache) キャッシュを扱う
* [gulp-sitemap](https://www.npmjs.org/package/gulp-sitemap) サイトマップXML作成
* [gulp-webshot](https://www.npmjs.org/package/gulp-webshot) Webページのスクリーンショット撮影

### ストリーム操作
* [gulp-changed](https://www.npmjs.org/package/gulp-changed) 前回のgulp実行から変更したファイルだけをフィルタリング
* [gulp-cached](https://www.npmjs.org/package/gulp-cached) 処理したファイルをキャッシュ。次回実行時、変更のないファイルは後のストリームに流れない
* [gulp-remember](https://www.npmjs.org/package/gulp-remember) タスクのストリームに流れたファイル群を記憶。上のgulp-cachedでストリームから外されたファイルを対象に復帰させる
* [gulp-newer](https://www.npmjs.org/package/gulp-newer) passing through only those source files that are newer than corresponding destination files.
* [gulp-if](https://www.npmjs.org/package/gulp-if) 分岐処理。条件に当てはまればタスクを実行
* [gulp-filter](https://www.npmjs.org/package/gulp-filter) 型グロブでフィルタリング。例えば引数に '**/*.js' を指定して以降のストリームにJavaScriptファイルのみ流したい場合などに使用

### タスク

* [run-sequence](https://www.npmjs.org/package/run-sequence) タスクを任意の順番で実行(同期的に)

### ファイル操作

* [~~gulp-bower-files~~](https://www.npmjs.org/package/gulp-bower-files) ※deprecateされた。代替は下の main-bower-files
* [main-bower-files](https://www.npmjs.org/package/main-bower-files) bower.json の main に書かれたファイルを取得。mainが書かれていなかったり、意図したものと異なる場合はオプションでオーバーライドする([»設定参考](http://safx-dev.blogspot.jp/2014/02/bowergulp-bower.html))
* [gulp-flatten](https://www.npmjs.org/package/gulp-flatten) ファイルのパス階層を無くす
* [gulp-rename](https://www.npmjs.org/package/gulp-rename) ファイルのリネーム
* [gulp-concat](https://www.npmjs.org/package/gulp-concat) 複数のファイルを1つに結合

### FTP、SFTP

* [gulp-ftp](https://www.npmjs.org/package/gulp-ftp) FTPサーバーにアップロード
* [gulp-sftp](https://www.npmjs.org/package/gulp-sftp) SFTPサーバーにアップロード。鍵はデフォルトで ~/.ssh/id_dsa と /.ssh/id_rsa を探す。オプションで変更可

### 画像

* [gulp-imagemin](https://www.npmjs.org/package/gulp-imagemin) 画像圧縮
* [gulp-image-resize](https://www.npmjs.org/package/gulp-image-resize) 画像リサイズ。OSに"ImageMagick"か"GraphicsMagick"が必要

### 圧縮・解凍

* [gulp-zip](https://www.npmjs.org/package/gulp-zip)/[gulp-unzip](https://www.npmjs.org/package/gulp-unzip) zip圧縮/解凍
* [gulp-tar](https://www.npmjs.org/package/gulp-tar)/[gulp-untar](https://www.npmjs.org/package/gulp-untar) tar圧縮/解凍
* [gulp-gzip](https://www.npmjs.org/package/gulp-gzip) gzip圧縮

### HTML

* [gulp-jade](https://www.npmjs.org/package/gulp-jade) Jadeのコンパイル
* [gulp-prettify](https://www.npmjs.org/package/gulp-prettify) HTMLをきれいに整形
* [gulp-minify-html](https://www.npmjs.org/package/gulp-minify-html) HTMLを圧縮
* [gulp-htmlhint](https://www.npmjs.org/package/gulp-htmlhint) HTML構文チェック

### CSS

* [gulp-sass](https://www.npmjs.org/package/gulp-sass) Sass/SCSSのコンパイル。常に圧縮されるのでsourcemap使えない
* [gulp-ruby-sass](https://www.npmjs.org/package/gulp-ruby-sass) 同上。sourcemap使えてオプション多い。自分は使うならこっち
* [gulp-less](https://www.npmjs.org/package/gulp-less) LESSのコンパイル
* [gulp-stylus](https://www.npmjs.org/package/gulp-stylus) Stylusのコンパイル
* [gulp-pleeease](https://www.npmjs.org/package/gulp-pleeease) 下記[A][B][C]、フォールバック(CSS変数, 擬似要素の繋ぎ :: を : に,rem指定ならpx指定追加) 、CSS shorthand filtersにSVG変換したものを追加などの機能が統合 [»pleeese](http://pleeease.io)
* [gulp-autoprefixer](https://www.npmjs.org/package/gulp-autoprefixer) [A]ベンダープリフィックスの整理（*指定で[エラーが出るらしい](http://www.anothersky.pw/2014/02/testing_gulpjs.html)）
* [gulp-combine-media-queries](https://www.npmjs.org/package/gulp-combine-media-queries) [B]メディアクエリを整理・統合。メディアクエリ部分に移動時、同じセレクタを統合してくれないのは不満
* [gulp-csscomb](https://www.npmjs.org/package/gulp-csscomb) CSSプロパティ並び順整理
* [gulp-csslint](https://www.npmjs.org/package/gulp-csslint) CSS構文チェック
* [gulp-minify-css](https://www.npmjs.org/package/gulp-minify-css) [C]CSS圧縮

### JavaScript用

* [gulp-jshint](https://www.npmjs.org/package/gulp-jshint) JavaScript構文チェッカー
* [gulp-coffeelint](https://www.npmjs.org/package/gulp-coffeelint) CofeeScript構文チェッカー
* [gulp-uglify](https://www.npmjs.org/package/gulp-uglify) UglifyJSで圧縮。オプション preserveComments:'some'でライセンスのコメント残す
* [gulp-jsonlint](https://www.npmjs.org/package/gulp-jsonlint) JSONをチェック
* [gulp-jsdoc](https://www.npmjs.org/package/gulp-jsdoc) JavaScriptからJSDocを生成
* [gulp-mocha](https://www.npmjs.org/package/gulp-mocha) Run Mocha tests


### 変換

* [gulp-entity-convert](https://www.npmjs.org/package/gulp-entity-convert) Unicode文字を実体参照に変換
* [gulp-markdown-pdf](https://www.npmjs.org/package/gulp-markdown-pdf) markdownをPDFに変換
* [gulp-markdown](https://www.npmjs.org/package/gulp-markdown) markdownをHTMLに変換
* [gulp-table2csv](https://www.npmjs.org/package/gulp-table2csv) HTMLテーブルをCSVに変換

### その他

* HTMLからJade,markdown,プレーンテキストに変換（gulp-html2xxxx）
* ファイル書き出し
* 文字コード変換
* DataURI化（gulp-base64,gulp-css-base64,gulp-data-uri）
* JSON,YAML,XML,PLIST,CSV の相互変換（gulp-convert,gulp-csv2json,gulp-xml2json）
* Angular関連

### 人気なので後で確認

* [~~gulp-rimraf~~](https://www.npmjs.org/package/gulp-rimraf) nodeで'rm -rf'確認無しで再帰的に削除 ※deprecateされた
* [gulp-batch](https://www.npmjs.org/package/gulp-batch) Event batcher for gulp-watcher
* [gulp-open](https://www.npmjs.org/package/gulp-open) Open files and URLs with gulp
* [gulp-nodemon](https://www.npmjs.org/package/gulp-nodemon)
* [gulp-watch](https://www.npmjs.org/package/gulp-watch) Watch, that actually is an endless stream
* [gulp-replace](https://www.npmjs.org/package/gulp-replace) 正規表現で置換
* [gulp-footer](https://www.npmjs.org/package/gulp-footer) Gulp extension to add footer to file(s) in the pipeline.
* [gulp-header](https://www.npmjs.org/package/gulp-header) Gulp extension to add header to file(s) in the pipeline.
* [gulp-match](https://www.npmjs.org/package/gulp-match) Does a vinyl file match a condition?
40

## 参考記事

* [gulp.js plugin registry](http://gulpjs.com/plugins/)
* [Bowerとgulp-bowerでフロントエンド向けライブラリを管理する](http://safx-dev.blogspot.jp/2014/02/bowergulp-bower.html)