JSの開発作業自動化ツールのGruntを軽く触ってみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

最近、会社で遭遇したいくつかの現象をブログに書こうと何度か思ったのですが、なぜか自宅ではそれらの現象が再現できないということが何度かあって更新頻度が減っています(ただのいいわけ)。

先日、フロントエンド開発徹底攻略 (WEB+DB PRESS plus)に収録されていたGruntの詳しい解説を読んでちょっとだけ触ってみた。

実行にはNode.jsが必要なようなので、下記ページからNode.jsをインストールして実行。
node.js
grunt

コマンドプロンプトを開いて、nodeコマンドの確認

インストールできていることが確認できる。

続いて、Gruntコマンドをnpmからインストール。自分の環境だと下記のようになった。

インストール時に-gオプションをつけることで、システムグローバルなパスにインストールすることになるらしい。試しにユーザー環境変数のPATHを調べてみると、”C:\Users\FMVF56DDRZ\AppData\Roaming\npm”が追加されており、そのフォルダを見てみると、”grunt”と”grunt.cmd”というファイルが追加されていた。

ところで、上記でインストールしたのはGruntのフロントエンドであるコマンド郡なだけで、バックエンドのGrunt本体は別途インストール必要があるよう(このあたり、まだよく分かってません。本に書いてあったことをそのまま書いてるだけです)。
というわけで、Gruntを動かそうとしているパスに移動して、Grunt本体をインストールすることに。

本当は、package.jsonというものを作って、–save-devオプションをつけてインストールするのがいいらしい。ただ、自分自身がよく分かってないのでそこまでしないことに。

とりあえず、UglifyJSというJavaScriptファイルをミニファイするツールを使ってみることにしてみる。

UglifyJSをインストールしてみようとすると、なぜかワーニングが表示された。見た感じ、package.jsonを用意してないのが悪いのだろうか? このあたりはよく分かってない。

つづいて、ミニファイを行う2つのJavaScriptファイルを置く(さすがに全く同じなのもなんなので、本に書かれているコードとは少し変えている)。

それと、Gruntを実行するには、Gruntfile.jsというファイルが必要なようなので、下記のように書いて置く。

いろいろ書いてありますが、とりあえずこれでsample01.jsとsample02.jsをミニファイルしたoutput.min.jsというファイルを作成する準備ができました。

というわけで実行。

ちゃんと作成されました。試しにoutput.min.jsを開いてみると、下記のようになっていました。

改行やムダなスペースをなくすだけでなく、変数名の短縮や、ちょっとした実装の変更まで行ってくれるようです。

他にも、Gruntには、grunt-contrib-watchというプラグインを使えばファイルの更新を検知して自動的にタスクを実行してくれるという便利な機能があるようです。

Gruntは名前ぐらいは聞いたことあったのですが、確かにすごい便利そうです。もう少し勉強して使いこなせるようになりたいと思います。ただ、それ以前に自分の場合は、Node.jsの勉強をしたほうがいいのかもしれませんが・・・。

2014/10/18追記:
どうやら、最近はGruntよりgulpというツールのほうがよく使われているようです。
JSの開発作業自動化ツールのgulpを軽く触ってみた | while(isプログラマ)

コメントを残す

メールアドレスが公開されることはありません。