とりあえずgruntを使い始めるまでの資料

1. Grunt入門
1

2. アジェンダ
• 1. Gruntとは
• 2. Node.jsのインストール
• 3. Gruntのインストール
• 4. プラグインのインストール
• 5. Gruntfile.jsの設定
• 6. Grunt vs gulp
2

3. Gruntとは
3
• http://gruntjs.com/
• Web開発でよく行う操作を自動化するツール
(タスクランナー)
• よく行う操作の例
• ファイルの結合
• minify化
• altJS等のファイル保存時のコンパイル処理等

4. Node.jsのインストール
• Gruntを使うためにはNode.jsの環境が必要
• Node.jsのバージョンを管理するツールを使って
インストールすると便利(nvm, nodebrew 等)
4
• 今回はnvmを使う
• https://github.com/creationix/nvm

5. Node.jsのインストール
• インストールまでのざっとした流れ
1. $git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0
—tags` (nvmがダウンロードされる)
5
2. ~/.bashrc or ~/.zshrcに以下を記述
$ source ~/.nvm/nvm.sh
3. ~/.bashrc or ~/.zshrcの読み込み
$ . ~/.bashrc or . ~/.zshrc
4. nvm install 0.10 (0.10系の最新がインストールされる)
5. ~/.nvmrcファイルを作りその中に使うnodeのバージョンを記述(v.0.10.32がある前提)
v0.10.32

6. Node.jsのインストール
• インストールまでのざっとした流れ(続き)
6
6. ~/.bashrc or ~/.zshrcに以下を記述
source ~/.nvm/nvm.sh # nodeを使うおまじない
nvm run -v # nvmrcに記述した内容を読み取って使用するnodeのバージョンを決定
if npm -v >/dev/null 2>&1; then
. <(npm completion) # npmのTAB補完を強化
fi
————————
~/.bashrcのみ
# nvmのTAB補完を強化
[[ -r $NVM_DIR/bash_completion ]] && . $NVM_DIR/bash_completion

7. Node.jsのインストール
• 以上1~6までの一連の流れを終えればnode, npm
コマンドが使えるようになっているはず！
※npm とはNode Package Manager の略でNode で作られたパッケージモジ
ュールを管理するためのツール
(参考: http://tmlife.net/programming/javascript/nodejs-package-manager-npm-usag.
7
html)

8. Gruntのインストール
• gruntを使うためにはgrunt-cliとgruntが必要。
• grunt-cliとgruntの違いは以下のページが参考にな
るかも。
http://js.studio-kingdom.
com/grunt/doc/getting_started
8

9. Gruntのインストール
• http://gruntjs.com/getting-started
• $ npm install -g grunt-cli
※-gオプションをつけるとグローバル(どこからでも使えるモジュール)、-gが
無いとローカル(プロジェクト直下でないと使えないモジュール)にインストー
ルされる
9

10. プラグインのインストール
• まず最初に以下のコマンドでpackage.jsonを作成
する。(package.jsonの説明は後ほど)
$ npm init
• 色々聞かれるがとりあえず全部エンターでOK。
10

11. プラグインのインストール
• package.jsonの役割
• プロジェクトに依存しているモジュール(ライブラリ)の管理
• phpでいうcomposer
• rubyでいうbundler
• jsだと他にもbowerというものがあるが、違いはクライアントサイドが
bower, サーバーサイドがnpmくらいの理解で良いと思う。
• 本番/テスト実行時のスクリプトを記述しておける。
• プロジェクトのパッケージ情報の記述
11

12. プラグインのインストール
• プロジェクトでgruntを走らせるのに必要なもの
をインストールする。
以下は今回のサンプルで使うものをインストールしている
$npm install --save-dev grunt grunt-contrib-concat grunt-contrib-uglify grunt-contrib-
watch
※--save-devオプションをつけるとpackage.jsonにプロジェクトに依存するモ
ジュール情報をインストールと一緒に追記してくれる。
12

13. プラグインのインストール
• プロジェクトローカルにインストールしたモジュ
ール(node_modules)は基本的にバージョン管理か
ら外す。
(package.jsonで依存モジュールを記述しているた
め。)
• package.jsonに追記された依存モジュールは以下
のコマンドでインストールされる。
$npm install
13

14. プラグインのインストール
• 今回インストールしたgrunt-contrib-○○系
• grunt公式のプラグイン
• その他にもgruntのプラグインはかなりの量があ
る。(2014/10/22現在で3745個)
http://gruntjs.com/plugins
14

15. プラグインのインストール
• 今回インストールしたプラグインの説明
• grunt-contrib-concat : 複数ファイルの連結
• grunt-contrib-uglify : ファイルのminify化
• grunt-contrib-watch : ファイル監視(保存時に何かしらの処理を行う等)
15

16. Gruntfile.jsの設定
• Gruntfile.jsにはgruntで自動化したい処理(タスク)
を記述していく。
• http://gruntjs.com/getting-started
上記ページのAn example Gruntfileを参考
16

17. Gruntfile.jsの設定
• 今回のサンプルコード
https://github.com/duyoji/lt_grunt/blob/master/Gru
ntfile.js
17

18. Gruntfile.jsの設定
• initConfig : タスク内容を記述
• loadNpmTasks : gruntプラグインの読み込み
• registerTask : タスクの登録
18

19. Gruntfile.jsの設定
• initConfig
• githubのレポジトリに各プラグイン毎にタスクの書き方やオ
プションなどが書かれているのでそちらを参考にする。
• https://github.com/gruntjs/grunt-contrib-concat
• https://github.com/gruntjs/grunt-contrib-uglify
• https://github.com/gruntjs/grunt-contrib-watch
19

20. Gruntfile.jsの設定
• registerTask
• default : gruntコマンドに引数を渡さなかったと
きに実行されるタスクを記述
• 引数あり: 引数と同じ名前のタスクが実行され
る。
今回のサンプルコードを例にすると以下のコマンドを実行するとconcatタ
スクが呼ばれあとに、uglifyタスクが実行される。
$ grunt build
20

21. Gruntfile.jsの設定
デモ
https://github.com/duyoji/lt_grunt
21

22. Grunt vs gulp
• gulpとは
• Gruntと同じタスクランナー
• Gruntの後に作られた。
• 以下を参考にすると良いかも。
• http://lxyuma.hatenablog.com/entry/2014/05/25/162218
• http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt
22

23. Grunt vs gulp
• Gruntとの比較
• メリット
• 複雑なtaskも管理し易く、simpleで、使うのが簡単
• 一時fileのdisk書き込みが無いので早くて能率的
• simpleで期待通り動くようにPluginのGuidelineがある
• APIが小さく学習時間かからない
• デメリット
• プラグインの数が少ない(gruntと比較して)
• grunt : 3745個, gulp : 779個(どちらも2014/10/22現在)
23

24. 終わり
24