Upload
tomoki-kobayashi
View
206
Download
0
Embed Size (px)
Citation preview
SCSSファイルのビルドJavaScriptファイルのバ
リデーション
JavaScriptファイルの軽量化(圧縮、minify)
CoffeeScriptファイルのコンパイル
Lessファイルのコンパイル
CSSファイルの圧縮
CSSファイルのバリデーションGitとの連携
画像の最適化 CSSスプライトの作成
Gruntを使うには下準備が必要です。
• sass/compassを使うのであればRubyのインストール
• sass/compassのインストール
• node.jsのインストール
• Grunt本体のインストール
以上4つを行う必要があります。
Rubyインストールすると標準的についてくるパッケージ管理ツールRubyGemsにてsass・compassのインストール。コマンドプロンプトを使用し以下を入力していく。
とりあえずはRubyGems自体をアップデート
アップデートされたらsass、compassのインストール コマンドプロンプトに以下入力
gem install sass
gem install compass
sass、compassのインストールを行う。
■npm(Node Package Manager)のインストール
コマンドプロンプトから !
> npm install -g grunt-cli !
上記コマンドを入力するとnpm(Node Package Manager)にてGruntのCLIをインストール出来る。
(オプションとして -gを付けておくと、どこからでも実行可能になる。)
■プラグインのインストール
上記を記載することによりプラグインをインストールし、package.jsonに追記させる。 このようにすることでGruntで使用したいプラグインをどんどん追加していく。
npm install gruntを行ったディレクトリ上で
npm install 【プラグイン名】 --save-dev
--- Memo --- package.jsonを使用することにより、package.jsonをコピペするだけでその他のディレクトリでも簡単に同じパッケージを共有する事が出来る。
!> npm install
!→既存のpackage.json から使用するプラグインのインストールを行う
ここからはCaptchaわけで説明 サンプルをGitHubにアップしているので 興味のある方は落としてみてください。
!!
※サンプルはすでにpackage.jsonを含めているので、 コマンドプロンプトで保存したディレクトリに行き、
!
npm install !
を実行すればOK
Captcha01【copy】
使い方
grunt-contrib-copyというプラグインを使います。 grunt-contrib-copyのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install grunt-contrib-copy --save-dev
Captcha02【clean】
使い方
grunt-contrib-cleanというプラグインを使います。 grunt-contrib-cleanのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install grunt-contrib-clean --save-dev
Captcha03【cssmin】
使い方
grunt-contrib-cssminというプラグインを使います。 grunt-contrib-cssminのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install grunt-contrib-cssmin --save-dev
使い方
grunt-csscombというプラグインを使います。 grunt-csscombのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install grunt-csscomb --save-dev
Captcha04【csscomb】
使い方
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】
使い方
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。