Pocket

個人的にPCを新調し、Gruntの環境を一から再度作成する必要があったため、メモ的にまとめておきます。



Node.jsをインストールする

Gruntを利用するためにはNode.jsが必要になります。
公式サイトよりダウンロードしてインストールします。

nodejs download

Node.jsがインストールがされているか確認するには、

node -v

をターミナルやWindowsの場合はコマンドプロンプトなどでたたき、
Node.jsのバージョンが表示されるか確認します。



Gruntをインストールする

Node.jsがインストールできたら、Gruntをインストールします。

ターミナルで、

sudo npm install -g grunt-cli

をたたきます。「-g」を付けてグローバルインストールをしているため、たたく場所はどこでも関係ないです。



Compassをインストールする

Compassの利用にはRubyが必要になりますが、Macにはデフォルトでインストールされているので、Windows環境の場合のみ公式サイトからインストールします。


Rubyがインストールされている状態で、

sudo gem update --system

sudo gem install compass

の順でたたいて、compassをインストールします。




「package.json」ファイルを準備する

Node.js、Grunt、またCompassのインストールができたらpackage.jsonファイルを作成します。
作成方法は、Gruntに監視させたいプロジェクトの中で、

npm init

をたたきます。たたくといろいろ聞かれますが、すべてEnterキーでそのまま進みます。
最後まで進むと、package.jsonが作成されます。



Gruntプラグインをインストールする

Gruntで使用するプラグインをインストールし、使えるようにします。

今回は、

  1. ・grunt
  2. ・grunt-contrib-compass
  3. ・grunt-contrib-concat
  4. ・grunt-contrib-watch
  5. ・grunt-contrib-jshint
  6. ・grunt-contrib-uglify
  7. ・grunt-contrib-cssmin

と、いったあたりをインストールします。

インストールは、

npm install プラグイン名 -save-dev

と一つ一つやっても良いですが、

npm install grunt grunt-contrib-compass grunt-contrib-concat -save-dev

みたいに複数並べて書くこともできます。



compass設定ファイルを作成する

compassの設定はconfig.rbというファイルに記述し、package.jsonと同じ階層に配置します。
新規にconfig.rbを作成し、中身は次のように記述します。



Gruntfile.jsを作成する

GruntのタスクはGruntfile.jsというファイルに書き、package.jsonと同じ階層に配置します。
まず、新規にGruntfile.jsというファイルを作成します。

中身はこのように書きました。



Gruntを実行する

あとは、ターミナルから、

grunt watch:all

をたたくと監視が開始され、cssなどを変更するとGruntによってcompassやcssminなどの処理が行われます。



まとめ

今回は詳しい説明は省きましたが、Gruntよりも今はgulpがキテいるのでgulpの導入についてもまとめていきたいと思います。


Pocket

Comment

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

*

Copyright © team naporitan All Rights Reserved.