Gruntを試そうシリーズ第1回目はGruntの概要、インストール方法、簡単なタスクの実行方法までを解説しつつ、Gruntを使うための開発環境を整えます。Gruntのちょっとややこしい仕組みや、なぜそのような仕組みが必要なのかについても解説します。package.json始めのサンプルの実行ちょっとややこしいGruntの仕組みこのシリーズでは、JavaScriptで書かれたタスクランナー、Gruntについて、基本的な部分を解説します。時点で書かれたものです。全3回で構成されています。本シリーズで使うサンプルは、以下よりダウンロードできます。GitHub第1回目では、Gruntの概要、インストール方法、簡単なタスクの実行方法までを解説します。Gruntってなに?みなさんは、jQueryを使う時、minifyされたjquery.min.jsなどを利用しているのではないでしょうか。.min.jsというファイル名は、minify*されたファイルであることを示すために、よく使われるファイル名です。*注:minifyファイル容量を減らすために、可読性を確保するためのスペースや改行などプログラムの実行に関係のないものをすべて取り払ってしまうこと。通常、開発が一通り終わった後で行われる処理。jQueryは、UglifyJSというツールを使い、このminifyを行っています。jQueryのほかにも、いろいろなminifyされたJavaScriptやCSSのファイルを見かけたことがあるかと思います。このようなminifyの処理は、基本的にはコマンドラインで利用できるツールを利用して行います。プロンプト)から以下のようなコマンド打てば、jquery.jsを圧縮したjquery.min.jsを作ってくれます。*注:UglifyJSのインストールUglifyJSはNode.jsのモジュールのひとつです。uglify-jsとターミナルからコマンドを打つだけで、インストールができます。uglify-jsを試し、管理者パスワードを入力した上でインストールしてください。詳しくはこの記事の後半で説明していますので、記事を一通り読んでから試してみてください。jquery.js簡単にできますね。ファイルを変更するたびに、このコマンドをいちいち実行するのは、なかなかに手間のかかる作業です。minifyされたファイルは、当然、ダウンロードにかかる時間も少なくなるため、ぜひともやりたいところですが、手間を考えれば、そこまではちょっとできないかなぁ......と思うことはあるのではないでしょうか。できればやりたいさまざまな作業を自動化ほかにもやりたいことは、いろいろとあります。JavaScriptファイルが複数に分かれていたら、そのファイルの数だけリクエストが飛んでしまうため、可能ならひとつにまとめたいです。これを手動でやるのは相当に骨の折れる作業です。おまけに、最近ではSassやCoffeeScriptなど、CSSやJavaScriptに変換できる仕組みもいろいろと登場してきました。それらの変換も必要です。それに、JavaScriptだけではなく、CSSもminifyしたいです。CoffeeScriptから生成されたJavaScriptファイルのうち、これとこれとあのライブラリをつなぎあわせ、統合したファイルを新規に作り、そのファイルをminifyしようなどというようなこともしたくなります。なってくると、それらの処理を手動で行うのは、ほとんど無理になってくるでしょう。このような、開発に必要な種々の処理(これらのことをビルドと呼ぶことが多いです)を、自動で一気にやってくれるのがGruntです。普段からJavaScript、CSSを書いている方は、手軽にビルドがまとめて行えるGruntを、ぜひ導入してみてほしいと思います。チームのビルド共有に向いているGruntは、Gruntfile.jsという名前のコンフィグファイルを作り、この中に実行したいタスクを書いていきます。このファイルは、ファイル名からわかる通り、JavaScriptのファイルです。それゆえ今までJavaScriptを書いていた人であれば、その導入はかなり簡単であるといえるでしょう。基本的なGruntの使い方を覚えれば、難しいものではありません。このように、ビルドの情報(処理)を一つのファイルにまとめておけることは、複数人で一つのプロジェクトを管理する上で、大きなメリットとなります。jQueryも、Gruntを使ってビルドされるようになりました。jQueryのレポジトリを見ると、Gruntfile.jsがあるのがわかります。WindowsでもMacでもLinuxでも、Gruntさえインストールしていれば使えます。幸いなことにGruntは、数あるビルドツールの中でも、かなり知名度のある存在となりました。Gruntfile.jsがそこに存在していれば、そのプロジェクトをどのようにビルドすればよいのか、すぐに知ることができます。たくさんのコマンドを暗記しておく必要はありません。以下のコマンドを実行するだけで、もろもろのビルドを行ってくれるのです。grunt充実したプラグイン多くのプラグインが利用できるというのも、Gruntのよいところです。追って解説していきますが、Grunt自体は、タスクランナーとしての最低限の機能だけを有したツールです。タスクを登録し、実行させるということしかできないのです。オープンに公開されている種々のプラグインを利用することで、さまざまなことが可能になります。このプラグインの一覧は、以下より閲覧できます。Runner上記ページを開いてみると、非常にたくさんのプラグインが用意されているのが、わかるかと思います。こんなにたくさん見せられても、どれが便利なのか、自分のタスクの助けとなるのか、よくわからないでしょう。このプラグインは基本的に誰でも登録できるものであるので、完全に動作が保証されてるとは言いがたいものではあります。このページの左にある入力欄から、絞り込み検索が行えます。そこにcontribと入れてみましょう。すると、☆マークのついたプラグインが多くヒットするでしょう。これらのプラグインは、Gruntチームがメンテナンスしている、かなり信頼性の高いプラグインです。このcontribシリーズの中には、以下のようなものがあります。CSSファイルをminifyするGruntプラグインを使えば、このような処理を、数行のJavaScriptを書くだけで実行できます。筆者は普段CoffeeScriptを使っており、そのコンパイルに、このcontrib-coffeeを利用しています。最近、CoffeeScriptがアップデートしたと思ったら、このcontrib-coffeeもすぐにアップデートされていました。これらのcontribプラグインは頻繁にメンテナンスされており、安心に利用できると考えてよいでしょう。Node.js/NPMインストールする前に、Gruntの仕組みについて、簡単に解説しておきましょう。Modules)に登録されているパッケージの一つです。このためGruntをインストールするには、まずNode.jsをインストールする必要があります。Node.jsをマシンにインストールしていない人は、まず、以下のサイトよりNode.jsをインストールしてください。インストーラに従うだけなので簡単です。(Node.jsについてすでにある程度わかっている方は、ここから先は適当に読み飛ばしてください)Node.jsNode.jsをインストールすれば、コマンドライン上からJavaScriptを走らせることができます。Python、Perlのような他のプログラミング言語のように、JavaScriptで書かれたプログラムをコマンドライン上から実行できます。ほとんどの場合、そのようにプログラムを書いていく上では、なにかしらのライブラリを使いたいのが常です。さまざまなライブラリを手軽に使うために、Node.jsはNPMというものを用意しました。NPMというのは、Node.jsで利用できるモジュールを管理する仕組みです。ユーザーはNPMに登録されているモジュールを、以下の形式で簡単にインストールできます。npmコマンドは、Node.jsがインストールされると、同時にインストールされます。始めに紹介したUglifyJSも、このNPMに登録されているパッケージの一つです。次のようなコマンドを打ちます。uglify-jsそうすると、そのディレクトリ内にnode_modulesというディレクトリが作られ、その中にUglifyJSがインストールされます。このコマンドを実行しても、そのディレクトリにUglifyJSをダウンロードしてくるだけです。これは、ローカルなインストールなのです。始めに少し解説した、以下のようなコマンドは利用できません。jquery.jsそのマシンのどこからでも、NPMのモジュールを利用したい場合は、以下のように、-gコマンドを付けてモジュールをインストールします。uglify-js-gを付けたインストールは、グローバルなインストールです。そのモジュールがコマンドラインから利用できるように作られていれば、どこからでもそのコマンドが利用できるようになります。この例の場合は、どこでもuglifyjsコマンドが利用できるようになります。今までにNode.jsを使ったことがない人は、手始めに試してみてください。grunt-cliGruntの話に戻りましょう。interface)をインストールします*。コマンドは次のようにタイプします。未満を既にインストールしている人は、一度、アンインストールしてください。grunt-cliを試してください。インストールのための管理者パスワード入力を求められます。インストールが成功すると、gruntコマンドが利用可能になります。試しに、以下のようにコマンドを実行してみてください。gruntすると、以下のようなメッセージが表示されます。http://gruntjs.com/getting-started上記のようなメッセージが出たら、ひとまず、grunt-cliのインストールは完了です。ややこしいのですが、実は、今インストールしたgrunt-cliというのは、Grunt本体ではありません。「そのディレクトリにインストールされたGruntを実行する」という処理を行う、小さなgruntコマンドなのです。Grunt本体は、まだインストールされていない状態です。package.jsonコードサンプルここから先のステップは、以下にサンプルを置いています。GitHubでは、Grunt本体はどこにインストールするのか?というと、そのプロジェクトのディレクトリに、ローカルにインストールします。プロジェクトのディレクトリにまず、package.jsonというファイルを作ります。そのファイルを開き、以下をコピー&ペーストして保存してください。}}このpackage.jsonというファイルは、Node.jsのプロジェクトにおいて、そのプロジェクトの名称やバージョン、依存するモジュールを書いておくためのファイルです。Grunt自体も、このpackage.jsonを使って利用するプラグインを管理し、そしてGrunt自体もこのファイルへ依存モジュールとして登録します。package.jsonを保存したら、そのディレクトリで、以下のコマンドを実行します。installするとpackage.jsonに書かれた依存モジュールが、そのディレクトリにインストールされます。成功すると、node_modulesというディレクトリが作られ、その中にGrunt自身がダウンロードされるはずです。この状態でgruntコマンドを打ってみると、次のようなメッセージが出ます。Gruntfile.正しいGruntfileがありませんと言われます。これで実質Gruntの準備は完了です。始めのサンプルの実行Gruntを実行するためには、先ほど少し解説した、コンフィグファイルが必要なのです。Gruntfile.jsを作り、始めのサンプルである次のコードをコピー&ペーストして保存してください。};そしてgruntコマンドを実行して、以下のようなメッセージが出れば、始めのサンプルを動かすことに成功したことになります。errors.これでGruntがちゃんと動作していることが確認できたことになります。ややこしいGruntの仕組みこれでやっとGruntの実行環境がそろったわけですが、なぜこのような仕組みになっているのか解説しておきましょう。gruntを実行すれば、それだけでgruntコマンドが利用できました。以降で解説する、いくつかのプラグインも、始めから同梱されていました。それらだけを使うのであれば、package.jsonも必要ありませんでした。その方法には問題がありました。その一番大きな問題は、Gruntのバージョンが異なるプロジェクトを同時に管理できなくなるという点です。0.3.16がインストールされている......という場合、始めのプロジェクトがビルドできなくなってしまう可能性があります。0.4.0に至るまでには、APIの変更がいろいろと行われてきました。そのたび、古いAPIを使って書かれたプロジェクトを、いちいち最新バージョン用に変更する必要がありました。このようなことを防ぐため、Grunt自体も、そのプロジェクトごとに用意するような方法に変えられたものと思われます。現在の「Grunt自身もそのプロジェクトにローカルインストールする方法」であれば、新しいバージョンのGruntがリリースされても、気にする必要なく、今までのコンフィグファイルを利用できることが期待できます。0.4.0ですべて個別のプラグインになり、同梱はされなくなりました。そのため、何か単純なことをするにもプラグインを利用するという形を取ることとなったわけです。そのようにしておかないと、Grunt本体が際限なく大きなモジュールとなってしまい、いずれかの機能にバグ修正やアップデートをかけた場合でも、Grunt自身のバージョンアップとしなければならなくなってしまうからであると考えられます。0.4.0に至るまでは、このような経緯がありました。筆者自身はかなり以前からGruntを利用していましたが、そのように、いつアップデートされ、書いた記事が使えなくなるかわからなかったため、記事にしづらい状況というのがありました。今度とも長く使うことが期待できる待望のバージョンだったのです。次回は、今回動かしてみたサンプルの解説から進めていきます。壮フロントエンド・エンジニアWeb制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。Webサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。jQuery入門』(技術評論社、2014年11月14日)がある。2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。特定商取引法に基づく。