初めての Grunt 導入方法

Grunt 概要

  • ・Node.jsを使用したCUIのビルドツール(黒い画面)
  • ・sass や coffee のコンパイル等毎回する作業を自動でやってくれる
  • ・ローカルサーバーとかも立ち上げてくれる
  • ・JavaScript で自動化するタスクを設定する

コジカさんがわかりやすいです。
http://kojika17.com/2013/03/grunt.js-memo.html

gitの準備

まずgitを使えるようにしておくこと。

Node.jsの準備

Node.js を nvm (Node Version Manager)でバージョン管理できる形で導入する。 バージョンによって、使えないプラグインがある + バージョン変更が面倒なので入れたほうが良い。 npmはnvmを入れれば勝手に入ってくる

nvm Node.jsのバージョン管理 コマンドでバージョン変更できる npm Node.jsで使用するモジュール管理 コマンドでインストールアンインストールできる

導入が終わったら、Grunt導入

Gruntのインストール

Gruntを動かすコマンドのインストール

コマンドプロンプトか、ターミナルを立ち上げて以下を入力

1
2

nvmw use v0.10.26 //使用するバージョン選択
npm install -g grunt-cli //どこでも使えるように -g パラメータを付ける

grunt-cli は gruntを実行するためのコマンドリストの意味 たからgruntをいれてもこれを入れないと動かない

1
2

grunt -version
grunt-cli v0.1.13

とか出ていれば OK

Gruntを使ってみる

1 作業ディレクトリを作成して、移動する。

1
2

mkdir samplepath/gruntsample
cd samplepath/gruntsample

GUIで作って移動するでも、もちろん良い。

2 設定ファイル「package.json」ファイル作成

1

npm init //対話が終わると package.json が生成される

ウィザードが色々聞いてくれるのでそれに応えて設定ファイルを作成

package.jsonとは？
Node.jsが依存ライブラリなどの環境情報を管理するための設定ファイル

3 gruntモジュールインストール プロジェクト毎にバージョンが違うこともあるので、gruntモジュールは個別にインストール

1

npm install grunt --save-dev

save-devオプションを付けると、package.json の 「devDependencies」プロパティに モジュール名:バージョン を自動追記してくれる

4 Gruntfile.jsファイルの作成 package.jsonと同じ階層に Gruntfile.js を作成 以下の内容を記述して、Gruntのタスクの設定する

1
2
3
4
5
6
7
8
9
10
11

module.exports = function(grunt) {
  //Gruntの設定
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
  //defaultタスクの定義
  grunt.registerTask('default', 'Log some stuff.', function() {
    //ログメッセージの出力
    grunt.log.write('Logging some stuff...').ok();
  });
};

コマンドラインで以下を入力してタスクを実行

1

grunt

gruntのみで動くのはderaultタスクが実行される 実行コマンドと走らせるタスクはもちろん自分で設定できる。

参考サイト

http://www.atmarkit.co.jp/ait/articles/1403/04/news020.html http://kojika17.com/2013/03/grunt.js-memo.html