便利なタスクランナーGruntとおすすめプラグイン紹介

ちゅわっす！こんにちはデザイナーの宮下です。

今回は便利なタスクランナーのGruntを布教のために紹介したいと思います。

※この記事は主にこんな人のためにかかれています。

・HTML/CSS/JS辺りのコーディングをする方

・黒い画面を勉強したい、または抵抗がない方

・Gruntとは？

・NodeとGruntをインストール

・便利なプラグイン紹介

Gruntとは？

まず、Gruntってなんぞ？って方のためにGruntをざっと紹介します。

ざっくりいうと「めんどくさいことを自動でやってくれる便利なやつ」です。

使いこなすと、「Photoshop上で画像を編集して保存するだけで、CSSスプライト用のコードと画像が

自動生成され、ブラウザが自動でリロードされる」なんてことが出来ます。

他にもコーディング時に便利な機能はこんな感じ

・ファイル保存時にブラウザを自動リロード

・SCSSコーディング時にリアルタイムプレビュー

・CSSスプライトの自動作成

・画像の最適化

・SassやCoffeeScript等のコンパイルエラー時に自動でお知らせ

Gruntを使えば、いろんなプラグインを組み合わせて様々なタスクを自動化できます！

NodeとGruntをインストール

1.まずGruntをインストールする前にNode.jsをインストールする必要があります。

http://nodejs.org/ からインストーラーをダウンロードしてインストールします。

インストールの詳細はこちらの記事が参考になります。

2.次にGruntをインストールしましょう！

ターミナルを開いて

npm install -g grunt

と入力してつったーん！するとnpmがいろいろインストールしてくれます！

もしエラーが発生した場合は書き込み権限がない可能性があるので

sudo npm install -g grunt

にするとインストール出来るかと思います。

grunt -h

でヘルプが表示されればインストール完了です！

便利なプラグインの紹介

実際に動く話は来週するとして…
Gruntを使う時に個人的に便利だと思ったプラグインを紹介します！

grunt-contrib-watch

grunt-contrib-watchはファイルの更新を監視してくれるプラグインです。
最も基本的なプラグインの一つで、このプラグインを利用してブラウザの自動リロードや
別のタスクを実行します。

grunt-takana

grunt-takanaはSCSSをコーディングする際になんとリアルタイムプレビューが出来るようになるプラグインです。
公式サイトのデモ動画を見るとわかりやすいと思います。
先日、クローズドベータがなくなり使えるようになっていたので実際に使ってみたところ5000行以上あるSCSSファイルでもlibsassというC++で実装されたコンパイラを利用し、ほぼ一瞬でコンパイルされブラウザに反映されます。

grunt-sprite-generator

grunt-sprite-generatorはCSSスプライトを自動生成してくれるプラグインです。
Compassでも実装されていますが、Gruntを利用すると先に言ったようにPhotoshopで作業していても
Slicy等の画像スライスツールを利用し保存すれば、画像の更新をGruntで監視しSCSSをコンパイルすると言ったことがシームレスに、自動実行できるようになります。

grunt-notify

grunt-notifyはSassやCoffeeScript等のコンパイルエラーやその他様々用途で通知をさせることができます。
SCSSの記法を間違えて、コンパイルエラーになっているのにブラウザを何回もリロードしてからエラーに気づく… なんてことにならないためにエラーや、Lint・Hint系のプラグインと連携して間違えた時にすぐ指摘してくれる環境は大規模な問題やミスを未然に防ぐのに重要なんじゃないかなと思います。
WindwosでもMacでも使えるので是非お試しを！

Gruntを利用して自動化出来ることは自動化して
こだわるべきところに時間をかけられるようになりましょう！(まず自分がなりたい)
来週は実際にGruntを実際に動かして、よりわかりやすく解説したいと思います！
以上です！