1. Gruntを使用してWEB制作
を便利にしよう
（導入/基礎編）

2. 01_Web制作を便利にする
Grunt

3. そもそもGruntってなに？

4. • Web制作で面倒な作業を自動化するツール

5. Gruntでできること

6. SCSSファイルのビルド
JavaScriptファイルのバリデーション
JavaScriptファイルの軽量化（圧縮、minify）
CoffeeScriptファイルのコンパイル
Lessファイルのコンパイル
CSSファイルの圧縮
CSSファイルのバリデーションGitとの連携
画像の最適化 CSSスプライトの作成

7. ・・・ありすぎてわからないし
難しそう(́・ω・｀；)

8. でも

9. 実は単純な作業であれば
そんなに難しくはない。

10. 02_Gruntのインストール

11. Gruntを使うには下準備が必要です。
• sass/compassを使うのであればRubyのインストール
• sass/compassのインストール
• node.jsのインストール
• Grunt本体のインストール
以上4つを行う必要があります。

12. Rubyインストール方法

13. １．現行の最新インストーラーをダウンロードしインストール
http://rubyinstaller.org/downloads/

14. ２．Ruby実行ファイルへの環境変数PATHを設定する。にチェックそのままインストール
個別に設定しなければいけない場合もあるので詳しくはgoogleで検索！

15. コマンドプロンプトを開き【ruby -v】と打つと現在のrubyのVersionがわかる。何も
出ない場合はきちんとインストールされていない。

16. sass・compassの
インストール

17. Rubyインストールすると標準的についてくるパッケージ管理ツールRubyGemsにて
sass・compassのインストール。コマンドプロンプトを使用し以下を入力していく。
とりあえずはRubyGems自体をアップデート

18. アップデートされたらsass、compassのインストール
コマンドプロンプトに以下入力
gem install sass
gem install compass
sass、compassのインストールを行う。

19. きちんとインストールできているかを確認
きちんと上記のように表示されていたら
問題なくインストールされている。

20. node.jsのインストール

21. node.jsのインストール
http://nodejs.org/
↑上記サイトからinstallボタンを押すとインストーラーが
ダウンロードされるのでインストール

22. ローカルに保存して実行すると
インストール完了。

23. ただちょっと待って下
さい。

24. node.jsはバージョンアップが早いためバージョン管理ツールなどの
導入も検討をしたほうがよいかも。（nodistなど）

25. Gruntのインストール

26. ■npm(Node Package Manager)のインストール
コマンドプロンプトから
!
> npm install -g grunt-cli
!
上記コマンドを入力するとnpm(Node Package Manager)にてGrunt
のCLIをインストール出来る。
（オプションとして -gを付けておくと、どこからでも実行可能になる。）

27. ■パッケージ設定ファイルの制作
任意のディレクトリを作成。
今回はgrunt_sampleというディレクトリの作成
!
（僕の場合は今回はDドライブ直下に作成）

28. コマンドプロンプトから、cdコマンドを使って
作成したディレクトリに移動。

29. 【現在いるディレクトリ】> cd 【移動したいディレクトリ】
!
一階層上に戻る場合は【cd ../】
※cd 【tabキー】 を押せば候補が出る。
コマンドプロンプトの見かた

30. 任意ディレクトリに移動したら、パッケージのインストール。
コマンドプロンプトで下記コマンドを打ち込む
> npm init

31. package.jsonの制作を行うコマンド。パッケージの設定が出来る。
色々設定出来ますが、とりあえず最初はエンター10回位押して
そのまま作ってOK。

32. いよいよGruntのインストールです。1行です。
!
npm install grunt --save-dev
!
簡単ｗ

33. --save-devをつけると、package.jsonに
インストールした情報が記述が追加される。
!
npm install grunt は、gruntをインストールしろ、という指示です。

34. 長いログが流れ、終了するとgrunt_sampleディレクトリは
次のようになるはず。
grunt_sample
これでGruntのインストールは完了です！

35. 03_Gruntの基本的な使い方

36. プラグインのインストール
方法

37. Gruntをインストールしたけど、このままでは使えません。
必要なプラグインを導入していきましょう。

38. ■プラグインのインストール
上記を記載することによりプラグインをインストールし、package.json
に追記させる。
このようにすることでGruntで使用したいプラグインをどんどん追加し
ていく。
npm install gruntを行ったディレクトリ上で
npm install 【プラグイン名】 --save-dev

39. --- Memo ---
package.jsonを使用することにより、package.jsonをコピペするだけ
でその他のディレクトリでも簡単に同じパッケージを共有する事が出来る。
!
> npm install
!
→既存のpackage.json から使用するプラグインのインストールを行う

40. タスクの設定

41. Gruntはプラグインをインストールしただけでは使用できません。
Gruntfile.jsというファイルを用意してタスクを書き込んでいきましょう

42. タスクの書き方は相対パスで基本的に記載していきます。
次のページから簡単なタスクの登録方法
Gruntfile.jsと名前を付けて保存。

43. 04_簡単なプラグインの説明

44. ここからはCaptchaわけで説明
サンプルをGitHubにアップしているので
興味のある方は落としてみてください。
!
!
※サンプルはすでにpackage.jsonを含めているので、
コマンドプロンプトで保存したディレクトリに行き、
!
npm install
!
を実行すればOK

45. Captcha01【copy】

46. Captcha01【copy】
概要（どういう事ができるのか？）
あるディレクトリにあるファイル（またはフォルダ）をそのまま別の場所
にコピーを作成することが出来る。
コピー

47. Captcha01【copy】
使い方
grunt-contrib-copyというプラグインを使います。
grunt-contrib-copyのインストール方法
※【02_Gruntのインストール】 が終わっている状態で。
> npm install grunt-contrib-copy --save-dev

48. Captcha01【copy】
Gruntfileの説明・書き方
プラグインのGitHubページに詳しい使い方が載ってます。

49. 実行！

50. Captcha02【clean】

51. Captcha02【clean】
概要（どういう事ができるのか？）
ディレクトリ・ファイルの削除ができる。
_dev
img
画像１
画像２
_dev
img

52. Captcha02【clean】
使い方
grunt-contrib-cleanというプラグインを使います。
grunt-contrib-cleanのインストール方法
※【02_Gruntのインストール】 が終わっている状態で。
> npm install grunt-contrib-clean --save-dev

53. Captcha02【clean】
Gruntfileの説明・書き方
プラグインのGitHubページに詳しい使い方が載ってます。

54. 実行！

55. Captcha03【cssmin】

56. Captcha03【cssmin】
概要（どういう事ができるのか？）
複数のcssの結合・圧縮などができる

57. Captcha03【cssmin】
使い方
grunt-contrib-cssminというプラグインを使います。
grunt-contrib-cssminのインストール方法
※【02_Gruntのインストール】 が終わっている状態で。
> npm install grunt-contrib-cssmin --save-dev

58. Captcha03【cssmin】
Gruntfileの説明・書き方
プラグインのGitHubページに詳しい使い方が載ってます。

59. 実行！

60. Captcha04【csscomb】

61. Captcha04【csscomb】
概要（どういう事ができるのか？）
CSSプロパティのソート・並び替え
修正前 修正後

62. 使い方
grunt-csscombというプラグインを使います。
grunt-csscombのインストール方法
※【02_Gruntのインストール】 が終わっている状態で。
> npm install grunt-csscomb --save-dev
Captcha04【csscomb】

63. Gruntfileの説明・書き方
sort.jsonにてソート順を読み込んでいる。
Captcha04【csscomb】

64. sort.json
Captcha04【csscomb】

65. 実行！

66. Captcha05【compass】

67. Captcha05【compass】
概要（どういう事ができるのか？）
compassに対応し、Sassのコンパイルができる。

68. 使い方
grunt-contrib-compassとというプラグインを使います。
grunt-contrib-compassとのインストール方法
※【02_Gruntのインストール】 が終わっている状態で。
> npm install grunt-contrib-compass --save-dev
Captcha05【compass】

69. Gruntfileの説明・書き方
基本的な設定は、compassで生成される
config.rbファイル内での設定をします。
Gruntfileではオプションでconfig.rbのパスを設定すればOK
Captcha05【compass】

70. config.rb
config.rbはsassが入っているディレクトリと
cssに書き出しを行いたいディレクトリを指定すれば最低限使える。
Captcha05【compass】

71. 実行！

72. Captcha06
【SampleTask】応用編

73. ここまでは、単発での作業を行なってきました。

74. でも、普通であれば単発での作業はあまり無く・・・。
同時に複数の作業を行わなければなりません。

75. そこで
【grunt-contrib-watch】

76. 【grunt-contrib-watch】とは
指定したファイルを監視し、
更新があった場合は指定したタスク
を実行する。

77. 使い方
grunt-contrib-watchとというプラグインを使います。
grunt-contrib-watchとのインストール方法
※【02_Gruntのインストール】 が終わっている状態で。
> npm install grunt-contrib-watch --save-dev
grunt-contrib-watch

78. Gruntfileの説明・書き方
例として。compassとwatchを使ったGruntfileの書き方。
Gruntfileの書き方はいろいろあるので自分の設定しやすいものに変えてOKです。
grunt-contrib-watch

79. grunt-contrib-watchの実行
grunt-contrib-watch
grunt-contrib-watchを実行すると、監視モードに入ります。
上のような画面が出ている時に、対象ファイルが更新されると指定した
タスクを実行します。
!
!
監視モードを終わりたい場合はctrl ＋ Cキーを押し
バッチ ジョブを終了しますか（Y/N）と出るので Yキーを入力し
Enter。

80. Captcha６に
今までのすべてのタスクを使っ
たサンプルファイルあります