Gruntを使用してWEB制作を便利にしよう (導入/基礎編)
01_Web制作を便利にするGrunt
• Web制作で面倒な作業を自動化するツール
SCSSファイルのビルドJavaScriptファイルのバ
リデーション
JavaScriptファイルの軽量化(圧縮、minify)
CoffeeScriptファイルのコンパイル
Lessファイルのコンパイル
CSSファイルの圧縮
CSSファイルのバリデーションGitとの連携
画像の最適化 CSSスプライトの作成
・・・ありすぎてわからないし難しそう(́・ω・`;)
実は単純な作業であればそんなに難しくはない。
Gruntを使うには下準備が必要です。
• sass/compassを使うのであればRubyのインストール
• sass/compassのインストール
• node.jsのインストール
• Grunt本体のインストール
以上4つを行う必要があります。
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のインストール
http://nodejs.org/ ↑上記サイトからinstallボタンを押すとインストーラーが ダウンロードされるのでインストール
ローカルに保存して実行すると インストール完了。
node.jsはバージョンアップが早いためバージョン管理ツールなどの 導入も検討をしたほうがよいかも。(nodistなど)
■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のインストールは完了です!
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と名前を付けて保存。
ここからはCaptchaわけで説明 サンプルをGitHubにアップしているので 興味のある方は落としてみてください。
!!
※サンプルはすでにpackage.jsonを含めているので、 コマンドプロンプトで保存したディレクトリに行き、
!
npm install !
を実行すればOK
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】
概要(どういう事ができるのか?)
ディレクトリ・ファイルの削除ができる。
_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】
概要(どういう事ができるのか?)
複数の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