開発に必須のツール「Grunt」の便利なプラグイン
GruntはWeb開発に必要なタスクを自動化してビルドするツール。node.jsを使っていてJsが書ける人は自由にタスクを追加したり、Gruntプラグインを使ってタスクを追加することが出来ます。今回は日々使わせてもらってる便利なプラグインを幾つか紹介。
CSS関連
- grunt-contrib-less
- lessをCSSに書き出すプラグイン。css.mapも書き出せたり圧縮にも対応。
- grunt-csscomb
- CSSのプロパティを任意のルールで順番にソートしてくれる。
- grunt-autoprefixer
- ベンダープレフィックスを自動で付与してくれる。オプションで対応させるブラウザの範囲も指定できる。
- grunt-contrib-csslint
- CSS構文チェック。
JS関連
- grunt-contrib-uglify
- jsファイルの圧縮。オプションによって圧縮方法も設定可能。
- grunt-contrib-concat
- 複数のJSファイルを1つのファイルに結合。
- grunt-contrib-jshint
- jsエラーチェック
HTML関連
- grunt-contrib-htmlmin
- htmlファイルの圧縮
- grunt-html-validation
- html構文チェック
Etc…
- grunt-contrib-watch
- ファイルの監視させて保存した時のタスクを設定できる。オプションを設定してブラウザのプラグイン”liverelord”がインストールされていれば、対象ファイルを保存をして設定したタスクを完了後ブラウザをリロードする事ができる。
- grunt-contrib-connect
- 簡易ローカルサーバー起動
- grunt-notify
- gruntのアラートをGrowlなどで表示
- grunt-build-control
- デプロイツール。例えば、masterブランチの特定フォルダをgh-pagesにデプロイしたり。
- grunt-webfont
- svgで作ったベクターのアイコンをwebフォントにしてくれてSassやLessファイルまでも書き出してくれるプラグイン。
