Gruntってなに?Web制作者のための自動化ツール

Pocket

Gruntってなに?

日進月歩でどんどん進んでいくWeb開発業界。デザインメインならまだしも、エンジニアならどんどん新しい技術を覚えないと仕事になりません。

このGruntもそんな新しい(といっても数年前からある)技術の一つ。名前だけではちょっとよく分からないんですが、やっぱり新しいものにも触れておかないとね!ということでGrunt入門してみました。

Grantってなに?

Web制作をしていて、ファイルの圧縮や構文チェック、SASSからCSSへのコンパイルなどの作業を行うことがよくあります。

構文チェックならHTMLファイルをW3Cのサイトにアップして、チェックして修正して・・・ということをやるんですが、こういった一連の操作(タスク)を自動化してくれるのがGrunt。

Gruntで何ができるの?

先ほども書いたように、ファイルの圧縮など様々なことができるようです。これらのタスクは自分で設定することもできますが、プラグインを導入すれば簡単に必要な機能を追加できます。
Gruntのプラグインで機能を追加

プラグインページをざっくり見た感じでは、以下のような機能があるようです。

  • ファイルの圧縮
  • ファイルのバリデーション
  • 不要ファイル、空白の削除
  • テスト
  • CSSにvendor-prefixの追加
  • SASS->CSSなどのコンパイル

Gruntをインストール

Gruntをインストールする前にNode.jsをインストールする必要があるので、先にこっちをインストールしておきます。

Node.jsの公式サイトからパッケージをダウンロードしてインストールします。

Gruntの方は公式サイトのGetting startedページにインストール方法が書いてあるので、これを見ながらインストールします。

まずはターミナルから以下のコマンドを実行。

npm install -g grunt-cli

Gruntのインストールでエラーが出たら、sudoをつけて実行してみます。この場合パスワードが必要になります。

sudo npm install -g grunt-cli

うまくインストールたかどうかを調べるには、バージョンをチェックしてみます。

grunt -version

これでインストール完了。

この後は・・・

Grunt自体をインストールできたので、この後はプロジェクトファイルを作って実際に使ってみたいと思います。

Gruntの簡単な使い方

Gruntより簡単!?なCodeKit

Gruntって何?からインストール、ハローワールドまでやってきましたが、よく考えるとすでに同じ機能をもっと簡単な方法で利用していました。

それがこちらのCodekit
Gruntよりも便利なcodekit
これを使えばわざわざタスクの設定や、ターミナルから実行しなくても、ファイルを保存した時点で自動的に圧縮やコンパイルをしてくれます。ターミナルに抵抗ある人にもおすすめ。