gruntを使ってCSS/JS周りを自動化するのが、なうでペヤングらしいので使ってみた

CSS ツール JavaScript

やほほ。

はてなダイアリーの使いづらいインタフェースなんとかしてくれって思ってる鳥さんだ。

さて、gruntっていうnode.jsを使うと、CSSやJavaScript周りを色々と自動化できると聞いて、使ってみたよ。

gruntでできること

「grunt watch」で監視しておくと、上書き保存した際に自動的に色んなことをしてくれるんだ。例えば・・・

  • ファイルの結合
  • JavaScriptファイルのバリデーション
  • JavaScriptファイルの軽量化（圧縮、minify）

機能を追加すれが、こんなこともできるようになるよ。（他にも探せばあるかも）

 

gruntの導入

さて、環境を構築しよ〜。

まず、node.jsのインストールと、node.jsのパッケージ管理システムnpmのインストール。

Windows、MacOSの場合、何も考えずにnode.jsの公式サイトにアクセスして、「INSTALL」をクリック、
ダウンロードされたインストーラーを「次へ」でどんどん進めば、両方ともインストールされ、
環境変数も設定される。

で、ターミナルを開いて以下のような応答があれば、それ以上することはないお。

$ node -v
v0.8.8
$ npm -v
1.1.59

で、次にgruntのインストール。
コマンドラインから以下のとおり。
※MacOSでは管理者権限で！

$ npm install -g grunt

ザーっと表示が流れるので、完了したところで以下のような反応があればおｋ！

$ grunt --version
grunt v0.3.15

 

gruntちゃまを使ってみる

てきとーにディレクトリを作ってみるとする。

grunt_test
├css_in
│├a.css
│└b.css
├grunt.js
└css_out
　└（空）

で、grunt.jsの中身はこんなスクリプトを書く。

module.exports = function(grunt) {
	grunt.initConfig({
		concat: {
			'all.css' : [
				'css_in/*.css'
			]
		},
		watch: {
			files: [
				''css_in/*.css'
			],
			tasks: 'concat'
		}
	});
};

a.cssとb.cssの中身はてきとーでOK。

このgrunt.jsは、css_inディレクトリの中のCSSを監視（watch）して、変更があったら、
全部"all.css"ファイルにまとめて出力（concat）してね☆という、
ごく単純なものだよ。

で、ターミナルから以下コマンドを実行。

$ grunt watch
Running "watch" task
Waiting...

監視が開始されるので、この時点で、a.cssの中身をてきとーに書き換える。
すると、以下のようにコマンドが流れ、一連のタスクが実行される。

Running "watch" task
Waiting...OK
>> File "css_in/a.css" changed.

Running "concat:all.css" (concat) task
File "all.css" created.

Running "watch" task
Waiting...

ディレクトリ直下にall.cssってファイルが出来てて、
a.cssとb.cssの中身がガッチャンコされてればOK！

あ、ちなみに監視はCtrl+Cで停止できるよん。

 

gruntのプラグインを入れてみる

gruntのプラグインには色々とあるけど、
今回はCSSで試してるので、CSSをminifyできるプラグインを入れてみる。
色々と便利ものがパッケージになってる、"grunt-contrib"っていうプラグインを入れるよ。

以下のコマンドを実行（「"-g"」が無いところに注意！）

$ npm install grunt-congrib

で、表示がダーっと流れるので、終わったら、
以下のコマンドを実行してインストールされていることを確認。（これも「"-g"」無し）

$ npm ls|grep grunt-contrib
└─┬ grunt-contrib@0.1.7

で、こんな感じにちょっと書き換える。

module.exports = function(grunt) {
	grunt.loadNpmTasks('grunt-contrib');

	grunt.initConfig({
		concat: {
			'all.css' : [
				'css_in/*.css'
			]
		},
		watch: {
			files: [
				''css_in/*.css'
			],
			tasks: 'concat mincss'
		},
		mincss: {
			'all.min.css': [ 'all.css' ]
		}
	});
};

で、書きなおしたのち、また"grunt watch"を開始して、てけとにb.cssを修正してみる。
すると、こんな感じでちょっち増える。

Running "watch" task
Waiting...OK
>> File "css_in/a.css" changed.

Running "concat:all.css" (concat) task
File "all.css" created.

Running "mincss:all.min.css" (mincss) task

Running "watch" task
Waiting...

で、 "all.min.css"というファイルが増えて、中にはa.cssとb.cssを圧縮したファイルができてるはず（mincss）。

この状態で作業していけば、ファイル保存時に勝手に圧縮作業まで完了していて、
ひととおり作業が終わったら、後はFTPでファイルをアップするだけ、というわけ。

 

gruntのびみょー足りないところ

さて、そんなステキに自動化してくれるgruntだけど、
ちょっち足りないところがあると思ってる。
私が不満に思ったことをチラホラ書くよ〜。

Sassのように、ディレクトリをサブディレクトリも含めて監視〜！ってのが出来ない。
ワイルドカード（*）は使えるみたいだけど、サブディレクトリまでは対象にならない。

相対的なディレクトリに、コンパイルされたファイルを置く！ってのも出来ない。
例えば、coffee/app/hoge.coffeeをapp/hoge.jsにコンパイルするとか、そうゆうの。
sassだとそうゆうのがあって、とても便利。

プラグインはgrunt.jsがあるディレクトリにローカルにインストールしないといけない。
つまり、grunt.jsの数分、プラグインが増える。
"--npm"オプションでプラグインを指定できるけど、これもローカルを見に行くようになってた。
ぬーん・・・なんか違うくね？（￣▽￣；

でわでわ。