ほんじゃーねっと

おっさんがやせたがったり食べたがったりする日常エッセイ

プログラミングはしたくないけど自動化はしたい人のための、Grunt.jsによる作業自動化入門

前回書いたNode.js入門記事の続き。

blog.honjala.net

前回から引き続き、

いかにプログラムの勉強無しで自動化できることを増やすか、

もとい、

いかに他部署のノンプログラマに自動化ツールを使わせて自分への作業依頼を減らすか、

をマイテーマに少しずつ情報をまとめていく。

Node.jsを紹介しただけでは、「Javascript…難しそう。いつかやるわ。」

となりそうなので、

今回はプログラミング要素最小限で使えるGruntを紹介する!

Gruntとは

Grunt: The JavaScript Task Runner

Node.js上で動く、タスクランナーとかビルドツールとか呼ばれるもので、

Gruntfileと呼ばれるファイルに実行したいこと(タスク)を書いておき、

コマンドを実行すると指定したタスクを実行してくれる。

Javascriptでプログラムを書くのと何がちがうのかというと、

通常のNode.jsプログラムはJavascriptでゴリゴリプログラムを書く必要があるが、

Gruntの場合はGruntfileに「設定」という形で実行したいことを並べるだけで

プログラムを書いたのと同等のことができる、という点が大きい。

変数とかループのようなプログラミング的要素や

Javascript言語に関する知識がほぼゼロでも、

作業自動化プログラムが作れるというわけだ。

まあ実際のところGruntfileもJavascriptプログラムではあるし、

プログラミング要素ゼロというわけにはいかないが、

プログラミングについて1から学ぶよりはハードルは低くなるはず。

あと注意点として、

Gruntを使うことでNode.jsでできることすべてが設定でできるようになるわけではない。

GruntはNode.jsのパッケージの中でもGrunt用に作成されたパッケージを

「プラグイン」という形で使えるようになっており、

それらを設定で組み合わせて使う。

それで実現できない機能は、Javascriptでゴリゴリ書くことになる。

Grunt用に用意されたプラグインは下記のページで一覧を確認できる:

Plugins - Grunt: The JavaScript Task Runner

Web制作系を中心に作業自動化に使えるプラグインがたくさん用意されている。

Gruntを実行する環境を用意する

まずはGruntを実行する環境を整える。

前回記事のNode.js実行環境が入っている前提なので、

入っていない場合は上の前回記事を参照いただきたい。

GruntもNode.jsのパッケージの1つとして提供されているので、

npmコマンドでインストールできる。

まずはgruntコマンドが使えるよう、

grunt-cliをグローバルインストールする。実行場所はどこでもOK。

npm install -g grunt-cli

これで「grunt」コマンドが使えるようになる。

試しに下記のコマンドでgruntがインストールできているか確認してみよう。

grunt --version

バージョン番号が表示されたら、成功だ。

続いて、Gruntアプリケーションを作成する。

Gruntアプリケーション作成の基本的な手順は

  1. node.jsアプリケーションを新規作成する
  2. gruntパッケージをインストールする
  3. 必要なgruntプラグインパッケージをインストールする
  4. Gruntfile.jsを作成する
  5. gruntコマンドでタスクを実行する

の5手順だ。

上記のうち、

1〜3はnode.jsアプリケーション作成でも出てきたnpmコマンドを使うだけなので、

手順として新しく覚えることはそれほど多くない。

全体の流れはあとでサンプルを作りながら見ていくとして、

新しく出てきた4、5のやり方を説明しておこう。

まず4のGruntfile.jsは新しいファイルを作成する。

ひとまず下記の内容をおまじないテンプレとして覚えておこう:

module.exports = function(grunt) {
    grunt.initConfig({
        //ここに色々設定を書く
    }); 
    
    //使用するプラグインを並べる
    grunt.loadNpmTasks("");
    //デフォルトで実行するタスクをを指定
    grunt.registerTask("default", "");
};

5のgruntコマンドの実行は下記の2パターンを覚えておくと良い。

デフォルトのタスクを実行する場合:

grunt

実行するタスクを指定する場合:

grunt <タスク名>

これがどのGruntアプリケーションにも共通する作成から実行の手順だ。

サンプル・アプリケーションを作成する

それでは、Node.jsの時と同じような、

WebのURLにアクセスしてページのデータを取ってくるサンプルを作成してみよう。

Gruntアプリケーションを作る時は、目的に合うプラグインが存在するかどうかが

重要なので、まずはプラグインを探すことから始める。

今回は「grunt-http」というプラグインが使えそうだ。

www.npmjs.com

Gruntのプラグイン一覧ページで必要なプラグインをクリックすると

上記のようなnpmの説明ページにリンクしており、

インストール方法と簡単な使い方を確認することができる。

node.jsアプリケーションを新規作成する

情報が揃ったので、ここからGruntアプリケーションを作成していく。

まずはnode.jsアプリケーション用のフォルダを作成し、

「npm init」コマンドで「package.json」を生成しよう。

npm init

gruntパッケージをインストールする

続いて、必要なnpmパッケージをインストールしていく。

まずはGruntアプリケーションに必須の「grunt」パッケージをインストールする。

npm install grunt --save-dev

必要なgruntプラグインパッケージをインストールする

今回使用する「grunt-http」パッケージもインストールしよう。

npm install grunt-http --save-dev

npmはパッケージ名さえ分かればインストールできるので楽なものだ。

Gruntfile.jsを作成する

パッケージが揃ったので、Gruntfile.jsを作成する。

Node.jsのサンプルと同じく、

このブログの「このブログについて」ページ(http://blog.honjala.net/about)の

HTMLソースを取得して、

同じフォルダ内に「sample.html」という名前で保存するように設定する。

まずは環境構築のところで紹介したテンプレを作成して…

module.exports = function(grunt) {
    grunt.initConfig({
        //ここに色々設定を書く
    }); 
    
    //使用するプラグインを並べる
    grunt.loadNpmTasks("");
    //デフォルトで実行するタスクをを指定
    grunt.registerTask("default", "");
};

そこに

「grunt-http」の説明ページを読みつつ下記のように設定を追加していく。

module.exports = function(grunt) {
    grunt.initConfig({
        //ここに色々設定を書く
        http: {
            sample_request: {
                options: {
                    url: "http://blog.honjala.net/about"
                },
                dest: "sample.html"
            }
        }
    }); 
    
    //使用するプラグインを並べる
    grunt.loadNpmTasks("grunt-http");
    //デフォルトで実行するタスクをを指定
    grunt.registerTask("default", "http:sample_request");
};

initConfigの中の「http」がgrunt-http用の設定となっている。

「sample_request」というのは私が決めた任意のタスク名だ。

その中でアクセス先を示す「url」とファイル保存先を示す「dest」を指定してる。

「grunt.loadNpmTasks」で「grunt-http」プラグインを使用することを宣言し、

「grunt.registerTask」でデフォルトのタスクとして

「http」の中の「sample_request」タスクを設定している。

設定をどのように記述するかはプラグインによって異なり、結構ハマりやすい。

新しいプラグインを使用する場合は、

プラグインの説明ページをよく読むか、

プラグイン名でググッて他の人が書いたGruntfile.jsを参考にすると良い。

gruntコマンドでタスクを実行する

デフォルトタスクに「http:sample_request」を指定してあるので、

grunt

コマンドを実行するだけで実行できる。

タスク名を指定したい場合は

grunt http:sample_request

でも実行できる。

実行して成功すると、「Done, without errors.」と表示され、

同じフォルダ内に「このブログについて」ページのソースが書き込まれた

sample.htmlというファイルが出力されているはずだ。

おわり

ひとまずこれでGruntの環境構築から実行までの流れの説明は終わり。

プラグインはたくさん用意されているので、

役に立ちそうなものがあれば試してみていただきたい。

フォルダ監視してファイルが追加・更新されたら処理を実行する、みたいなことも

できるようになるので、自動化の幅が広がるはずだ。

最後にGrunt関係でよく出てくる言葉について簡単な説明を書いておく。

gulp.jsって?

gulp.js

今回はGruntを扱っているが、

Node.jsで動く同じようなツールとしてGulpというものがある。

どちらもタスクを記述して自動化しやすくする、

という目的は同じで、基本的にできることも大体同じだが、

設定の記述方法、使用できるプラグイン、実効速度等が異なる。

gulp.jsはGruntをもっと便利に、もっと速く!

という思想(なのかどうか分からないけど)で作られたツールで、

Gruntより新しいだけあって洗練されている感がある。

但し、Gruntと比較してプログラミング寄りの記述になるので、

プログラム知識がないととっつきにくいかもしれない。

プログラミング的要素をできるだけ排除して、

シンプルなタスクを実行するならGruntが分かりやすい印象。

ということで今回はGruntで説明した。

タスクランナーとビルドツールについて

タスクランナーは繰り返し実行するようなタスクをコマンド1つで実行するためのツール、

ビルドツールはビルド作業(作成したプログラムをリリース用に変換する作業)を

を実行するためのツール。

ビルド作業自体もタスクといえばタスクなので、

まあ似たようなものだと考えておけば良いと思う。

Node.js以外では、

Ruby言語のRakeとか、Java言語のAntやMavenとか、Groovy言語のGradleなど、

最近の言語はそれぞれビルドツールが用意されてることが多いみたい。

上記のツールの名前が出てきたら、

「自動化用のビルドツール…だよね。し、しってるよ。」

と言っておけばまあまあ間違いではない。

記事が長くなって最後の方が適当になってしまった…。

Getting Started with Grunt: The JavaScript Task Runner

Getting Started with Grunt: The JavaScript Task Runner