grunt前回書いたNode.js入門記事の続き。blog.honjala.net前回から引き続き、いかにプログラムの勉強無しで自動化できることを増やすか、もとい、いかに他部署のノンプログラマに自動化ツールを使わせて自分への作業依頼を減らすか、をマイテーマに少しずつ情報をまとめていく。Node.jsを紹介しただけでは、「Javascript...難しそう。RunnerNode.js上で動く、タスクランナーとかビルドツールとか呼ばれるもので、Gruntfileと呼ばれるファイルに実行したいこと(タスク)を書いておき、コマンドを実行すると指定したタスクを実行してくれる。通常のNode.jsプログラムはJavascriptでゴリゴリプログラムを書く必要があるが、Gruntの場合はGruntfileに「設定」という形で実行したいことを並べるだけでプログラムを書いたのと同等のことができる、という点が大きい。作業自動化プログラムが作れるというわけだ。まあ実際のところGruntfileもJavascriptプログラムではあるし、プログラミング要素ゼロというわけにはいかないが、プログラミングについて1から学ぶよりはハードルは低くなるはず。あと注意点として、Gruntを使うことでNode.jsでできることすべてが設定でできるようになるわけではない。GruntはNode.jsのパッケージの中でもGrunt用に作成されたパッケージを「プラグイン」という形で使えるようになっており、それらを設定で組み合わせて使う。それで実現できない機能は、Javascriptでゴリゴリ書くことになる。RunnerWeb制作系を中心に作業自動化に使えるプラグインがたくさん用意されている。Gruntを実行する環境を用意するまずはGruntを実行する環境を整える。入っていない場合は上の前回記事を参照いただきたい。GruntもNode.jsのパッケージの1つとして提供されているので、npmコマンドでインストールできる。gruntコマンドが使えるよう、grunt-cliをグローバルインストールする。実行場所はどこでもOK。grunt-cliこれで「grunt」コマンドが使えるようになる。試しに下記のコマンドでgruntがインストールできているか確認してみよう。--versionバージョン番号が表示されたら、成功だ。続いて、Gruntアプリケーションを作成する。Gruntアプリケーション作成の基本的な手順はnode.jsアプリケーションを新規作成するgruntパッケージをインストールする必要なgruntプラグインパッケージをインストールするGruntfile.jsを作成するgruntコマンドでタスクを実行するの5手順だ。手順として新しく覚えることはそれほど多くない。新しく出てきた4、5のやり方を説明しておこう。4のGruntfile.jsは新しいファイルを作成する。"");};5のgruntコマンドの実行は下記の2パターンを覚えておくと良い。<タスク名>これがどのGruntアプリケーションにも共通する作成から実行の手順だ。サンプル・アプリケーションを作成するそれでは、Node.jsの時と同じような、WebのURLにアクセスしてページのデータを取ってくるサンプルを作成してみよう。Gruntアプリケーションを作る時は、目的に合うプラグインが存在するかどうかが重要なので、まずはプラグインを探すことから始める。今回は「grunt-http」というプラグインが使えそうだ。www.npmjs.comGruntのプラグイン一覧ページで必要なプラグインをクリックすると上記のようなnpmの説明ページにリンクしており、インストール方法と簡単な使い方を確認することができる。node.jsアプリケーションを新規作成する情報が揃ったので、ここからGruntアプリケーションを作成していく。init」コマンドで「package.json」を生成しよう。initgruntパッケージをインストールする続いて、必要なnpmパッケージをインストールしていく。Gruntアプリケーションに必須の「grunt」パッケージをインストールする。--save-dev必要なgruntプラグインパッケージをインストールする今回使用する「grunt-http」パッケージもインストールしよう。--save-devnpmはパッケージ名さえ分かればインストールできるので楽なものだ。Gruntfile.jsを作成するパッケージが揃ったので、Gruntfile.jsを作成する。同じフォルダ内に「sample.html」という名前で保存するように設定する。"");};そこに「grunt-http」の説明ページを読みつつ下記のように設定を追加していく。"http:sample_request");};initConfigの中の「http」がgrunt-http用の設定となっている。「sample_request」というのは私が決めた任意のタスク名だ。その中でアクセス先を示す「url」とファイル保存先を示す「dest」を指定してる。「grunt.registerTask」でデフォルトのタスクとして「http」の中の「sample_request」タスクを設定している。設定をどのように記述するかはプラグインによって異なり、結構ハマりやすい。新しいプラグインを使用する場合は、プラグインの説明ページをよく読むか、プラグイン名でググッて他の人が書いたGruntfile.jsを参考にすると良い。gruntコマンドでタスクを実行するデフォルトタスクに「http:sample_request」を指定してあるので、gruntコマンドを実行するだけで実行できる。http:sample_requestでも実行できる。同じフォルダ内に「このブログについて」ページのソースが書き込まれたsample.htmlというファイルが出力されているはずだ。おわりひとまずこれでGruntの環境構築から実行までの流れの説明は終わり。役に立ちそうなものがあれば試してみていただきたい。フォルダ監視してファイルが追加・更新されたら処理を実行する、みたいなこともできるようになるので、自動化の幅が広がるはずだ。最後にGrunt関係でよく出てくる言葉について簡単な説明を書いておく。gulp.jsって?gulp.js今回はGruntを扱っているが、Node.jsで動く同じようなツールとしてGulpというものがある。設定の記述方法、使用できるプラグイン、実効速度等が異なる。gulp.jsはGruntをもっと便利に、もっと速く!という思想(なのかどうか分からないけど)で作られたツールで、Gruntより新しいだけあって洗練されている感がある。Gruntと比較してプログラミング寄りの記述になるので、プログラム知識がないととっつきにくいかもしれない。プログラミング的要素をできるだけ排除して、シンプルなタスクを実行するならGruntが分かりやすい印象。いうことで今回はGruntで説明した。タスクランナーとビルドツールについてタスクランナーは繰り返し実行するようなタスクをコマンド1つで実行するためのツール、ビルドツールはビルド作業(作成したプログラムをリリース用に変換する作業)をを実行するためのツール。ビルド作業自体もタスクといえばタスクなので、まあ似たようなものだと考えておけば良いと思う。最近の言語はそれぞれビルドツールが用意されてることが多いみたい。「自動化用のビルドツール...だよね。」と言っておけばまあまあ間違いではない。記事が長くなって最後の方が適当になってしまった...。はてなブログProおいしいものを食べてぐーたらすることしか考えていない、2児の父。noteにもエッセイを載せてます。Versionnoteはてなブログをはじめよう!piro_sukeさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。