プログラミングはしたくないけど自動化はしたい人のための、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アプリケーション作成の基本的な手順は

node.jsアプリケーションを新規作成する
gruntパッケージをインストールする
必要なgruntプラグインパッケージをインストールする
Gruntfile.jsを作成する
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");
};