Grunt とは？
JavaScript開発でよく使うビルドツール。makeやrakeのJavaScript版です。
Grunt: The JavaScript Task Runnerにて公開されています。
どうやって使うの？
コマンドラインから操作します。Node.jsのパッケージマネージャ(npm)を使ってインストールします。
事前準備
Node.jsのインストール
Chocolatey
Chocolateyを入れてないなら、コマンドプロンプトで以下のコマンドを実行しましょう。
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin
Node.js
続いて
cinst nodejs.install
ChocolateyでNode.jsをインストールするパッケージにはnodejsとnodejs.installがあります。
nodejsはNode.js本体のみインストールし、npm（node.jsのパッケージマネージャコマンド）をインストールしません。
nodejs.installを指定してください。
grunt-cliのインストール
npm install -g grunt-cli
コマンドプロンプトを管理者権限で起動していないと上手くいかないかもしれません。
動かしてみます
今回はgrunt-contribe-concatというgruntのプラグインを使用してファイルを結合します。
作業ディレクトリを作成
作業用ディレクトリを作成し、移動します。ここでは仮にgeorgesとしましょう。
mkdir georges
cd georges
packege.jsonの作成
package.jsonはnpm用のプロジェクト定義ファイルです。
Mavenのpom.xmlやbundlerのGemfileに相当します。
npm init
を実行すると対話形式で作成できます。
今回はすべての問いにEnterのみで答えてデフォルトのファイルを作ります。
こんな感じです。
{
"name": "georges",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD-2-Clause"
}
インストール
プラグインをインストールします。
npm install grunt-contribe-concat
以下の警告が出ます。これらはプロジェクトの説明が不足しているため表示されています。gruntを動かすだけなら問題ありません。無視して進めます。
npm WARN package.json georges@0.0.0 No description
npm WARN package.json georges@0.0.0 No repository field.
npm WARN package.json georges@0.0.0 No README data
Gruntfile.jsを作成
Gruntの設定ファイル、Gruntfile.jsを作ります。
module.exports = function(grunt) {
grunt.initConfig({
concat: {
dist: {
src: ['ge.txt', 'or.txt', 'ges.txt'],
dest: 'georges.txt',
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
};
initConfig の引数でタスクを指定します。
使用するプラグインをloadNpmTasksで読み込みます。
動かしてみる
作成したタスクを指定してgruntコマンドを実行します。
grunt concat
以下の表示が出れば成功です。
Running "concat:dist" (concat) task
File "georges.txt" created.
まだ結合する元ファイルが無いため作成されたgeorges.jsファイルは空です。
元ファイルを作成
結合元のファイルを用意します。UTF-8で作成しないと文字化けするので注意してください。
_ ∩
( ﾟ∀ﾟ)彡 おっぱい！おっぱい！
⊂彡
もう一度実行
grunt concat
georges.txtの中身が次のようになっていれば成功です。
_ ∩
( ﾟ∀ﾟ)彡 おっぱい！おっぱい！
⊂彡
今回使用したファイル
今回使用したファイルはgithubに公開しています。