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様にご指摘いただきました。感謝！m(_ _)m）
プラグイン
今は使わない方が良いプラグインリスト - gulpjs/plugins - github
↑要チェック。この記事には未反映
Webサーバー、ユーティリティ
- browser-sync Webサーバー/ライブリロード
-
gulp-webserverWebサーバー/ライブリロード ※browser-syncに乗り換えた -
gulp-connectWebサーバー/ライブリロード ※deprecateされた。後継の gulp-webserver を使うこと -
gulp-livereloadライブリロード ※browser-syncに同機能含む - gulp-plumber エラーが起きてもwatchさせているタスクを中断させない
- gulp-util Utility functions for gulp plugins
- gulp-load-plugins 読み込むgulpプラグインをpackage.jsonに記述できるようにする
-
gulp-cleanファイル、ディレクトリの削除（再帰的）→ deprecateされた。同等機能のgulp-rimrafもdeprecateされるかも。ファイル・ディレクトリの削除は gulp.srcは使わず、rimraf/delを使う方法 を使うのが良い - gulp-notify Mac,Linux,Windowsに通知メッセージ
- gulp-cache キャッシュを扱う
- gulp-sitemap サイトマップXML作成
- gulp-webshot Webページのスクリーンショット撮影
ストリーム操作
- gulp-changed 前回のgulp実行から変更したファイルだけをフィルタリング
- gulp-cached 処理したファイルをキャッシュ。次回実行時、変更のないファイルは後のストリームに流れない
- gulp-remember タスクのストリームに流れたファイル群を記憶。上のgulp-cachedでストリームから外されたファイルを対象に復帰させる
- gulp-newer passing through only those source files that are newer than corresponding destination files.
- gulp-if 分岐処理。条件に当てはまればタスクを実行
- gulp-filter 型グロブでフィルタリング。例えば引数に '**/*.js' を指定して以降のストリームにJavaScriptファイルのみ流したい場合などに使用
タスク
- run-sequence タスクを任意の順番で実行(同期的に)
ファイル操作
-
gulp-bower-files※deprecateされた。代替は下の main-bower-files - main-bower-files bower.json の main に書かれたファイルを取得。mainが書かれていなかったり、意図したものと異なる場合はオプションでオーバーライドする(»設定参考)
- gulp-flatten ファイルのパス階層を無くす
- gulp-rename ファイルのリネーム
- gulp-concat 複数のファイルを1つに結合
FTP、SFTP
- gulp-ftp FTPサーバーにアップロード
- gulp-sftp SFTPサーバーにアップロード。鍵はデフォルトで ~/.ssh/id_dsa と /.ssh/id_rsa を探す。オプションで変更可
画像
- gulp-imagemin 画像圧縮
- gulp-image-resize 画像リサイズ。OSに"ImageMagick"か"GraphicsMagick"が必要
圧縮・解凍
- gulp-zip/gulp-unzip zip圧縮/解凍
- gulp-tar/gulp-untar tar圧縮/解凍
- gulp-gzip gzip圧縮
HTML
- gulp-jade Jadeのコンパイル
- gulp-prettify HTMLをきれいに整形
- gulp-minify-html HTMLを圧縮
- gulp-htmlhint HTML構文チェック
CSS
- gulp-sass Sass/SCSSのコンパイル。常に圧縮されるのでsourcemap使えない
- gulp-ruby-sass 同上。sourcemap使えてオプション多い。自分は使うならこっち
- gulp-less LESSのコンパイル
- gulp-stylus Stylusのコンパイル
- gulp-pleeease 下記[A][B][C]、フォールバック(CSS変数, 擬似要素の繋ぎ :: を : に,rem指定ならpx指定追加) 、CSS shorthand filtersにSVG変換したものを追加などの機能が統合 »pleeese
- gulp-autoprefixer [A]ベンダープリフィックスの整理（*指定でエラーが出るらしい）
- gulp-combine-media-queries [B]メディアクエリを整理・統合。メディアクエリ部分に移動時、同じセレクタを統合してくれないのは不満
- gulp-csscomb CSSプロパティ並び順整理
- gulp-csslint CSS構文チェック
- gulp-minify-css [C]CSS圧縮
JavaScript用
- gulp-jshint JavaScript構文チェッカー
- gulp-coffeelint CofeeScript構文チェッカー
- gulp-uglify UglifyJSで圧縮。オプション preserveComments:'some'でライセンスのコメント残す
- gulp-jsonlint JSONをチェック
- gulp-jsdoc JavaScriptからJSDocを生成
- gulp-mocha Run Mocha tests
変換
- gulp-entity-convert Unicode文字を実体参照に変換
- gulp-markdown-pdf markdownをPDFに変換
- gulp-markdown markdownをHTMLに変換
- 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-rimrafnodeで'rm -rf'確認無しで再帰的に削除 ※deprecateされた - gulp-batch Event batcher for gulp-watcher
- gulp-open Open files and URLs with gulp
- gulp-nodemon
- gulp-watch Watch, that actually is an endless stream
- gulp-replace 正規表現で置換
- gulp-footer Gulp extension to add footer to file(s) in the pipeline.
- gulp-header Gulp extension to add header to file(s) in the pipeline.
-
gulp-match Does a vinyl file match a condition?
40