仕事の事やプライベートな事を適当に書いていくブログ

Teaが適当に仕事や趣味のアレコレを適当に書いていくブログです。

【メモ書き】自分の為だけのgruntメモ【チラシ裏でOK】

この記事は自分の為だけに記したメモ書きになるので、マジで参考になりません。
よく忘れるので、ここら辺へざっくりメモです。
色々な箇所から引用したり、社内用に書いたものを忘れないように。


とりあえず導入

WIN環境

「node.js」「ruby」入れようね。
node.js バージョン管理ツール
 Windows
  nvmw
 Mac
  nodebrew
grunt.js - Grunt入門 - Qiita


・node.js
http://nodejs.org/
version >= 0.8.0 (grunt 0.4.x+)

ruby.js
http://rubyinstaller.org/downloads/
※ちょっと古いやつで
インストーラ立ち上げ後インストーラのオプションが3つあるので、「環境変数のPATHに通す設定」にチェックを入れる。

環境変数とか設定

・node.js
変数名:NODE_HOME、変数値:node.exeが入っていたディレクトリのパス

ruby.js
Rubyの外部エンコーディング

set RUBYOPT=-EUTF-8

Rubyライブラリのアップデート

gem update --system

確認は

ruby -v

MAC環境

winを参考にnode.jsだけ入れる。

インストールと使い方

とりあえずgruntを入れる

npm install -g grunt-cli

※grunt本体じゃないよ。

package.json

とりあえずdropboxにあるからDLしてこい。

新規はこれで作ってろ(ENTER連打でおk)

npm init

黒い画面は

cd C:\

Macは、

cd ~/

とかで
よく読めよ
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17

パッケージインスト

結論だけ先に書くけど、

npm install

これ叩いたらもう終り。

新規パケ入れる時は

npm install パッケージ --save-dev

※--save-devでpackage.jsonに書き込んでくれる(ラッキー)

Gruntfile

coffeeで書ける(もちろんjsも)
これもDropBoxからDLしてこい。

変更とか調整は
KOJIKAさんの記事見てガンバ!

監視

今更だけどやるgrunt入門編・インストールから基本的な使い方|WEB Drawer
これによると、WIN7

grunt

じゃだめだから

grunt.cmd

で動くらしい

DOSKEY grunt=grunt.cmd $*

としとけば、以降はgruntだけでOK。

面倒なら、最初から

grunt.cmd

で覚えておけ

そして、

grunt watch

で監視ね