LoginSignup
339

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-06-14

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

人気なので後で確認

参考記事

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
339