超！イマサラ！Gruntを導入するだけしてみた
最近、「イマドキGrunt使ってないフロントエンドエンジニアいるの？（笑）」みたいな風潮だけど、ここに居ました。笑ってください。ここに居ました。
初めてHTMLを触った時はテーブルレイアウトが主流、サイトの上部には「This site is Japanese only.」の表記、ウェブリングやヘンテコな同盟に参加してバナーを貼りまくり、JavaScriptといえばページの上部から雪を降らせる技術、みたいな化石時代を生きてきた私が、やっと重い腰を上げてGruntを導入してみた。
Gruntのインストール
node.js（とnpm）が入っていればインストールは簡単。
Terminalにて、下記のコマンドを入れるだけ。
$ sudo npm install -g grunt-cli
grunt-cliがGrunt本体、-gをつけることによりグローバル環境にインストール、っていうコマンド。
バージョンを表示してみる。
$ grunt -version grunt-cli v0.1.13
これにてインストール完了。
Gruntを試してみる
上記のページを参考に。
package.jsonをつくる
そもそもpackage.jsonってのはなんぞ、って話になるけど...
node.jsがパッケージを管理するために使うもの、らしい。
npmというnode.js用のパッケージ管理ツールが読み込む、パッケージの依存関係とかを書き記すファイル。
適当な場所にフォルダを作って移動。下記のコマンドを入力。
$ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. ・・・（以下略）
プロジェクト名やバージョンとかを入力するように求められるので、適宜入力。
nameさえURLで使える形式になっていれば、何も入力せずにEnterキー連打で良いっぽい。
設定が終わると、フォルダ内に「package.json」っていうファイルができる。
Gruntモジュールをインストール
あれ？Gruntのインストールってさっきやったじゃん？と思ったんだけど、最初にやったのは「grunt-cli」っていうGruntの本体をグローバル環境にインストール。
今度やるのはGruntをそれぞれのプロジェクトにインストールする、っていうことの模様。
参考サイトによると、
Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (2/2) - ＠IT
プロジェクトごとにGruntのバージョンが違うこともあるため、gruntモジュールは個別にインストールします。
ってことだそうです。
インストールするには、さっきのpackage.jsonのあるフォルダで下記のコマンドを入力するだけ。
$ npm install grunt --save-dev
save-devオプションをつけることによって、自動的にpackage.jsonに必要な記述を追加してくれる。
コマンドを入れたあと、さっきのフォルダを見るとpackage.jsonと同じ階層に「node_modules」っていうフォルダができている。
また、package.jsonにも
"devDependencies": {
"grunt": "^0.4.5"
}っていう記述が追加される。
Gruntfile.jsをつくる
Gruntは様々なことを自動化してくれる便利なツール。
その動作は、「Gruntfile.js」という名前のJavaScriptで記述する。
Gruntをインストールしたフォルダに、
module.exports = function(grunt) { // 中身 };
こんな感じのラッパー関数を作ってあげて、この関数内にどんどん動作を書いていく。
ここまで書いてアレなんだけど...
今のはやりはGulpというビルドツールのようで。（さっき気づいた）
Gruntは入れてみたけど、使用はとりあえず保留にしといて、Gulp入れてみようと思います（白目
ウェブの知識とかちょっと見ないうちにあっという間に時代遅れになって怖いね。
