Gruntを使用してWEB制作
を便利にしよう
(導入/基礎編)
01_Web制作を便利にする
Grunt
そもそもGruntってなに?
• Web制作で面倒な作業を自動化するツール
Gruntでできること
SCSSファイルのビルド
JavaScriptファイルのバリデーション
JavaScriptファイルの軽量化(圧縮、minify)
CoffeeScriptファイルのコンパイル
Lessファイルのコンパイル
CSSファイルの圧縮
CSSファイルのバリデーションGitとの連携
画像の最適化 CSSスプライトの作成
・・・ありすぎてわからないし
難しそう(́・ω・`;)
でも
実は単純な作業であれば
そんなに難しくはない。
02_Gruntのインストール
Gruntを使うには下準備が必要です。
• sass/compassを使うのであればRubyのインストール
• sass/compassのインストール
• node.jsのインストール
• Grunt本体のインストール
以上4つを行う必要があります。
Rubyインストール方法
1.現行の最新インストーラーをダウンロードしインストール
http://rubyinstaller.org/downloads/
2.Ruby実行ファイルへの環境変数PATHを設定する。にチェックそのままインストール
個別に設定しなければいけない場合もあるので詳しくはgoogleで検索!
コマンドプロンプトを開き【ruby -v】と打つと現在のrubyのVersionがわかる。何も
出ない場合はきちんとインストールされていない。
sass・compassの
インストール
Rubyインストールすると標準的についてくるパッケージ管理ツールRubyGemsにて
sass・compassのインストール。コマンドプロンプトを使用し以下を入力していく。
とりあえずはRubyGems自体をアップデート
アップデートされたらsass、compassのインストール
コマンドプロンプトに以下入力
gem install sass
gem install compass
sass、compassのインストールを行う。
きちんとインストールできているかを確認
きちんと上記のように表示されていたら
問題なくインストールされている。
node.jsのインストール
node.jsのインストール
http://nodejs.org/
↑上記サイトからinstallボタンを押すとインストーラーが
 ダウンロードされるのでインストール
ローカルに保存して実行すると
インストール完了。
ただちょっと待って下
さい。
node.jsはバージョンアップが早いためバージョン管理ツールなどの
導入も検討をしたほうがよいかも。(nodistなど)
Gruntのインストール
■npm(Node Package Manager)のインストール
コマンドプロンプトから
!
> npm install -g grunt-cli
!
上記コマンドを入力するとnpm(Node Package Manager)にてGrunt
のCLIをインストール出来る。
(オプションとして -gを付けておくと、どこからでも実行可能になる。)
■パッケージ設定ファイルの制作
任意のディレクトリを作成。
今回はgrunt_sampleというディレクトリの作成
!
(僕の場合は今回はDドライブ直下に作成)
コマンドプロンプトから、cdコマンドを使って
作成したディレクトリに移動。
【現在いるディレクトリ】> cd 【移動したいディレクトリ】
!
一階層上に戻る場合は【cd ../】
※cd 【tabキー】 を押せば候補が出る。
コマンドプロンプトの見かた
任意ディレクトリに移動したら、パッケージのインストール。
コマンドプロンプトで下記コマンドを打ち込む
> npm init
package.jsonの制作を行うコマンド。パッケージの設定が出来る。
色々設定出来ますが、とりあえず最初はエンター10回位押して
そのまま作ってOK。
いよいよGruntのインストールです。1行です。
!
npm install grunt --save-dev
!
簡単w
--save-devをつけると、package.jsonに
インストールした情報が記述が追加される。
!
npm install grunt は、gruntをインストールしろ、という指示です。
長いログが流れ、終了するとgrunt_sampleディレクトリは
次のようになるはず。
grunt_sample
これでGruntのインストールは完了です!
03_Gruntの基本的な使い方
プラグインのインストール
方法
Gruntをインストールしたけど、このままでは使えません。
必要なプラグインを導入していきましょう。
■プラグインのインストール
上記を記載することによりプラグインをインストールし、package.json
に追記させる。
このようにすることでGruntで使用したいプラグインをどんどん追加し
ていく。
npm install gruntを行ったディレクトリ上で
npm install 【プラグイン名】 --save-dev
--- Memo ---
package.jsonを使用することにより、package.jsonをコピペするだけ
でその他のディレクトリでも簡単に同じパッケージを共有する事が出来る。
!
> npm install
!
→既存のpackage.json から使用するプラグインのインストールを行う
タスクの設定
Gruntはプラグインをインストールしただけでは使用できません。
Gruntfile.jsというファイルを用意してタスクを書き込んでいきましょう
タスクの書き方は相対パスで基本的に記載していきます。
次のページから簡単なタスクの登録方法
Gruntfile.jsと名前を付けて保存。
04_簡単なプラグインの説明
ここからはCaptchaわけで説明
サンプルをGitHubにアップしているので
興味のある方は落としてみてください。
!
!
※サンプルはすでにpackage.jsonを含めているので、
コマンドプロンプトで保存したディレクトリに行き、
!
npm install
!
を実行すればOK
Captcha01【copy】
Captcha01【copy】
概要(どういう事ができるのか?)
あるディレクトリにあるファイル(またはフォルダ)をそのまま別の場所
にコピーを作成することが出来る。
コピー
Captcha01【copy】
使い方
 grunt-contrib-copyというプラグインを使います。
 grunt-contrib-copyのインストール方法
 ※【02_Gruntのインストール】 が終わっている状態で。
 > npm install grunt-contrib-copy --save-dev
Captcha01【copy】
Gruntfileの説明・書き方
プラグインのGitHubページに詳しい使い方が載ってます。
実行!
Captcha02【clean】
Captcha02【clean】
概要(どういう事ができるのか?)
ディレクトリ・ファイルの削除ができる。
_dev
img
画像1
画像2
_dev
img
Captcha02【clean】
使い方
 grunt-contrib-cleanというプラグインを使います。
 grunt-contrib-cleanのインストール方法
 ※【02_Gruntのインストール】 が終わっている状態で。
 > npm install grunt-contrib-clean --save-dev
Captcha02【clean】
Gruntfileの説明・書き方
プラグインのGitHubページに詳しい使い方が載ってます。
実行!
Captcha03【cssmin】
Captcha03【cssmin】
概要(どういう事ができるのか?)
複数のcssの結合・圧縮などができる
Captcha03【cssmin】
使い方
 grunt-contrib-cssminというプラグインを使います。
 grunt-contrib-cssminのインストール方法
 ※【02_Gruntのインストール】 が終わっている状態で。
 > npm install grunt-contrib-cssmin --save-dev
Captcha03【cssmin】
Gruntfileの説明・書き方
プラグインのGitHubページに詳しい使い方が載ってます。
実行!
Captcha04【csscomb】
Captcha04【csscomb】
概要(どういう事ができるのか?)
CSSプロパティのソート・並び替え
修正前 修正後
使い方
 grunt-csscombというプラグインを使います。
 grunt-csscombのインストール方法
 ※【02_Gruntのインストール】 が終わっている状態で。
 > npm install grunt-csscomb --save-dev
Captcha04【csscomb】
Gruntfileの説明・書き方
sort.jsonにてソート順を読み込んでいる。
Captcha04【csscomb】
sort.json
Captcha04【csscomb】
実行!
Captcha05【compass】
Captcha05【compass】
概要(どういう事ができるのか?)
compassに対応し、Sassのコンパイルができる。
使い方
 grunt-contrib-compassとというプラグインを使います。
 grunt-contrib-compassとのインストール方法
 ※【02_Gruntのインストール】 が終わっている状態で。
 > npm install grunt-contrib-compass --save-dev
Captcha05【compass】
Gruntfileの説明・書き方
基本的な設定は、compassで生成される
config.rbファイル内での設定をします。
Gruntfileではオプションでconfig.rbのパスを設定すればOK
Captcha05【compass】
config.rb
config.rbはsassが入っているディレクトリと
cssに書き出しを行いたいディレクトリを指定すれば最低限使える。
Captcha05【compass】
実行!
Captcha06
【SampleTask】応用編
ここまでは、単発での作業を行なってきました。
でも、普通であれば単発での作業はあまり無く・・・。
同時に複数の作業を行わなければなりません。
そこで
【grunt-contrib-watch】
【grunt-contrib-watch】とは
指定したファイルを監視し、
更新があった場合は指定したタスク
を実行する。
使い方
 grunt-contrib-watchとというプラグインを使います。
 grunt-contrib-watchとのインストール方法
 ※【02_Gruntのインストール】 が終わっている状態で。
 > npm install grunt-contrib-watch --save-dev
grunt-contrib-watch
Gruntfileの説明・書き方
例として。compassとwatchを使ったGruntfileの書き方。
Gruntfileの書き方はいろいろあるので自分の設定しやすいものに変えてOKです。
grunt-contrib-watch
grunt-contrib-watchの実行
grunt-contrib-watch
grunt-contrib-watchを実行すると、監視モードに入ります。
上のような画面が出ている時に、対象ファイルが更新されると指定した
タスクを実行します。
!
!
監視モードを終わりたい場合はctrl + Cキーを押し
バッチ ジョブを終了しますか(Y/N)と出るので Yキーを入力し
Enter。
Captcha6に
今までのすべてのタスクを使っ
たサンプルファイルあります
https://github.com/syaorinnmao/HCMTG_1407

Hcmtg 1407