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

  • 335
    いいね
  • 0
    コメント

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サーバー、ユーティリティ

ストリーム操作

  • 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 を探す。オプションで変更可

画像

圧縮・解凍

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用

変換

その他

  • 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関連

人気なので後で確認

参考記事