LoginSignup
91
93

More than 5 years have passed since last update.

僕がGrunt.jsで使っているPlugin一覧

Last updated at Posted at 2014-08-21

どんなニーズに基いているか

デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。
デザイナーだけどフロントエンドに興味ある人向け。

2015-02-07: gulp編を作成

gruntからgulpへ移行したので、gulp版の一覧も作成しました。
僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita

プラグイン一覧:非Contrib系

grunt-aws-s3

S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。

  • 同名ファイルは確認なしで上書き可能
  • デフォルトでpublic-readになるので、Web関係には便利

配布元
https://github.com/MathieuLoutre/grunt-aws-s3

grunt-bless

IE9のセレクタ数限界を解消する「bless」を実行できる。
昔はまったので保険のために入れている。ちゃんとSMACSSとか考えればおそらく不要。

参考:IE 9以下に存在するセレクター数制限にはまった
http://less.carbonfairy.org/post/18072493708

grunt-browser-sync

静的なHTMLで制作しているものであれば、livereloadよりこちらをよく使う。

  • スクロール位置や画面遷移を、複数のブラウザを通してリアルタイムに同期
  • HMTL、JavaScript等の更新をリアルタイムに反映
  • 同じネットワークにあれば、仮想マシンやスマートデバイスからも表示できる

参考:各種ブラウザを同期して手軽に複数環境での確認ができるようになるgrunt-browser-syncについて紹介するよ
http://re-dzine.net/2013/12/grunt-browser-sync/

grunt-coffeelint

CoffeeScriptをlintできる

参考:CoffeeLintを使ってみた
http://codedehitokoto.blogspot.jp/2012/04/coffeelint.html

grunt-concurrent

watchタスクの中身をつまみ食いするように監視させたい、けど標準の機能だとできない…。
そんな場合にはこれがあると便利!

参考:How to run two grunt watch tasks simultaneously
http://stackoverflow.com/questions/17585385/how-to-run-two-grunt-watch-tasks-simultaneously

grunt-csscomb

CSSのプロパティをソートします。なんとなく意識高そうなので入れてる

参考:CSSプロパティをソートしてくれるgrunt-csscombについて紹介するよ
http://qiita.com/t32k/items/e59cebb51825347689f9

grunt-html-validation

何気に世話になってるかも…。W3CのルールでHTMLの検査をしてくれる。
タグの閉じ忘れや変なプロパティ名になることを回避できるので便利。

grunt-jekyll

一番世話になってるかも。中々使いやすいHTMLプリプロセッサ。
jekyll, Sass, CoffeeScriptが、僕にとっての3種の神器!

参考:Jekyllいつやるの?ジキやルの?今でしょ!
http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/

grunt-kss

CSSのドキュメント(スタイルガイド)生成に。デフォルトのテンプレートがダサいので、適当に恰好良いのを入れると良いと思う。かなり綺麗なドキュメントが作れるのでおすすめ。

参考:イケてるスタイルガイドを簡単に作れるgrunt-kssについて紹介するよ
http://qiita.com/t32k/items/9e03e80061de21411765

grunt-modernizr

定番ライブラリmodenizr.jsのカスタムビルドを生成してくれる。カスタマイズ設定がgruntfileに記述されるため、環境構築しやすい。

grunt-scss-lint

SCSSのlintができる。まだあんまし使ってない…

grunt-sitemap

GoogleWebmasterToolsに送信する「sitemap.xml」を、静的ファイルをベースに自動生成してくれる。SEO対策に。

参考:サイトマップについて
https://support.google.com/webmasters/answer/156184?hl=ja

grunt-text-replace

テキストの置換ができる。
ファイルの先頭へ、ビルドの度に日付を入れたいしたいときに便利。
正規表現も使える

grunt-usemin

これは使えそう! concatや他のminify系プラグインよりも使い勝手が良く、そのうちこれに置き換えていきたい。yeomanのテンプレートでも使われている

参考:concat/minifyしたファイルへのリンクを grunt-usemin を使って自動で書き換える
http://nantokaworks.com/try-grunt-usemin/

プラグイン一覧:Contrib系

grunt-contrib-compass

Sass/Compassのコンパイルに使う。定番

参考:CSSの常識が変わる!「Compass」、基礎から応用まで!
http://liginc.co.jp/designer/archives/11623

grunt-contrib-clean

これは説明不要

grunt-contrib-coffee

CoffeeScriptのコンパイルに使う。これも定番

参考:CoffeeScriptって何?
http://minghai.github.io/library/coffeescript/01_introduction.html

grunt-contrib-connect

定番です。たいていbrowser-syncしか使わないけど、いざ即興でWebサーバを立ち上げたくなったときにあると便利。セッティングが楽なので

grunt-contrib-copy

これも説明不要。ないと困る

grunt-contrib-csslint

CSSをlintできる。reset.cssのコードが引っかかるので、正直ウザい

参考:CSSLintのRulesの超訳
https://gist.github.com/hail2u/1303613

grunt-contrib-cssmin

CSSのミニファイに使う

grunt-contrib-htmlmin

HTMLのミニファイに使う。意外と見落しがち

grunt-contrib-imagemin

画像ミニファイに使う。定番

grunt-contrib-livereload

動的サイトの場合はこれを使うケースが多い

grunt-contrib-requirejs

requireJSの最適化ファイルを生成するr.jsをgruntに対応させたもの。requireJSを使うなら必須。

grunt-contrib-uglify

JSミニファイに。定番
closure-compilarはインストールが面倒なので使っていない…

grunt-contrib-watch

これがないと困る。説明不要

grunt-contrib-yuidoc

JSドキュメント生成に。CoffeeScriptにもそのまま使える

91
93
0

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
91
93