開発に必須のツール「Grunt」の便利なプラグイン

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ファイルまでも書き出してくれるプラグイン。
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

15 + ten =