Follow @mycb750

自動化ツールGruntの開発環境構築をメモ

Webデザイナの間で流行っている（便利な）Gruntについて。
Gruntは主にWebデザイナの普段の作業を自動化するツールになる。
ブラウザのオートリロードやSass/Lessのコンパイル、minファイル（css,javascriptの縮小）作成の自動化、ファイルの結合、バージョン管理システムとの連携などの作業を自動化してくれる。

今回はオートリロードが動作するところまで確認する。
ブラウザのオートリロードを実現するためにはGruntのサーバとブラウザにクライアントツールを設置する必要がある。
オートリロードはファイル更新時のブラウザの更新Windowsの場合は「F5」MACの場合は「Ctrl + R」が自動化される。そのため作業の手間を１つ減らす事ができる。

node.jsとnpmのインストール

node.jsは非同期処理を実現するためのjavascriptライブラリ（リアルタイム処理が可能）でGruntを動かすためにはこれが必要となる。
npmはnode.jsのパッケージ管理ツールでnode.jsのプラグインをインストールしたりする場合に使用する。

公式サイトより「Install」ボタンを押下してファイルダウンロードしそのまま実行する。
基本的に変更しないで全て「次へ」でインストール完了

動作確認：
windowsの場合：
コマンドプロンプト（すべてのプログラム > アクセサリ）を立ち上げて下記コマンドを実行し、バージョン番号が表示されれば成功
macの場合：
ターミナルを立ち上げて下記コマンドを実行し、バージョン番号が表示されれば成功

node.jsのインストール確認

node -v

npmのインストール確認

npm -v

grunt-cliをインストール

gruntの実体をnpmパッケージ管理ツールでインストールする

npm install -g grunt-cli

※　-g　オプションを入れることでグローバル領域にインストールされる

サンプルプロジェクトのダウンロード

オートリロードのサンプルをとりあえず動作させる。
まずはサンプルを下記よりダウンロード
https://github.com/y-matsumoto/grunt-sample

ディレクトリ構成について：
css
　- base.css　※サンプルCSSのため好きなファイルへ変更して良い
　- style.css　※サンプルCSSのため好きなファイルへ変更して良い
index.html　　※サンプルHTMLのため好きなファイルへ変更して良い
Gruntfile.js ※Gruntの設定ファイル（パッケージ追加などはここで行う）
package.json ※npmの設定ファイル（基本的に一度作成したら手動では弄らない）

サンプルプロジェクトへGruntインストール

1.コマンドプロンプトでサンプルディレクトリへ移動する
※cdコマンド　参考：http://cmd-pro.com/com_00.html

2.インストールコマンドの実行

npm install

Gruntサーバの立ち上げ

Gruntサーバの立ち上げ

grunt

Running “watch” task
Waiting…

状態であれば成功
※基本的にこの状態でサーバが立ち上がっている状態のため常に起動しておくこと

Gruntクライアントツールのインストール

GoogleChromeやFireFoxヘクライアントツールのLiveReloadプラグインを導入する
下記参考サイトを参考に導入すると良い。

参考サイト：http://blog.sou-lab.com/livereload/

クライアントツールの起動

index.htmlファイルをプラグインをインストールしたブラウザで開き、LiveReloadのスイッチを入れる
※参考サイトを参考にすること

オートリロード動作確認

index.html、各cssを更新し、ファイルを保存しリアルタイムで更新されたら成功
※更新されるタイミングはファイルを保存したタイミングになる

それぞれのファイルの設定情報などについてはまた次回！