Hcmtg 1407

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インストール方法

１．現行の最新インストーラーをダウンロードしインストール

http://rubyinstaller.org/downloads/

２．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 !

簡単ｗ

--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】



ディレクトリ・ファイルの削除ができる。

_dev

img

画像１

画像２

_dev

img


使い方

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




実行！

Captcha03【cssmin】



複数のcssの結合・圧縮などができる


使い方

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




実行！

Captcha04【csscomb】



CSSプロパティのソート・並び替え

修正前修正後

使い方

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



sort.jsonにてソート順を読み込んでいる。


sort.json


実行！

Captcha05【compass】



compassに対応し、Sassのコンパイルができる。

使い方

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



基本的な設定は、compassで生成される config.rbファイル内での設定をします。

Gruntfileではオプションでconfig.rbのパスを設定すればOK


config.rb

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


実行！

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


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

grunt-contrib-watch

grunt-contrib-watchの実行grunt-contrib-watch

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

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

https://github.com/syaorinnmao/HCMTG_1407

https://github.com/syaorinnmao/HCMTG_1407

Hcmtg 1407

Internet