gruntの基本的な機能 - ruirui

gruntってなに

本家のHPいわく、

Grunt is a task-based command line build tool for JavaScript projects(http://gruntjs.com/)

ということでJavaScript周りのツールらしい。

具体的に何をやっているの？

githubのドキュメンテーションを見ると基本的に使える機能は

concat
init
lint
min

などがある。
それ以外でもプラグイン的なものが配布されているので基本で満足できない人は機能の拡張をすることができるらしい。

まずはディレクトリの作り方

test
├js
│├all.js
│└_core
│    ├sample1.js
│    └sample2.js
├grunt.js
└index.html

grunt.js fileの場所についてだが、
ドキュメンテーションによると、gruntが実行されたディレクトリ内でgrunt.jsというgruntfileを探して現在のディレクトリにgruntfileがなければその親フォルダを、なければその親フォルダを、、、というようにファイルが見つかるまで親ディレクトリを探し続ける。
そのため、というようにgrunt.jsをフォルダの一番上においていおくのが流行っているらしい。

grunt fileの中身

まず、例として以下のファイルを見てみる。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    lint: {
      all: ['grunt.js', 'js/_core/sample1.js', 'js/_core/sample2.js', 'js/all.js']
    },
    jshint: {
      options: {
        browser: true
      }
    }
  });

  // Load tasks from "grunt-sample" grunt plugin installed via Npm.
  grunt.loadNpmTasks('grunt-sample');

  // Default task.
  grunt.registerTask('default', 'lint sample');

};

上から見ていくと

module.exports = function(grunt) {
  // gruntの記述
};

というような記述でgrunt fileを書き始めるのがgrunt fileのルールだ。

次にgruntの基本機能の記述について見ていく

  grunt.initConfig({
  // gruntの基本機能
  //lint やconcatなど
});

プラグイン

grunt.loadNpmTasks('grunt-sample');

これはgrunt-sampleというプラグインを読み込んでいる。

このプラグインを読み込むときは事前にターミナルで

$ npm install grunt-sample

のコマンドを入力し、プラグインをインストールしておく必要がある。

ただひとつ問題があって、プラグインをインストールする先だが、grunt.jsがあるディレクトリにインストールしなければいけないらしい。なので、毎回新しく作業をはじめるごとにそのディレクトリでそのプラグインをインストールしないと。。。めんどくさい。。

実行

今回の場合

  grunt.initConfig({
    lint: {
      all: ['grunt.js', 'js/_core/sample1.js', 'js/_core/sample2.js', 'js/all.js']
    },
    jshint: {
      options: {
        browser: true
      }
    }
  });

gruntfileが上記のようになっているため、lintとjshintというタスクを実行することができる。
今回、lintだけを実行する

ターミナルを開いて
以下のコマンドを打つだけ！

$ grunt lint

これはgrunt fileでlintというタスクを設定しているので、それを実行しますよということだ。
lintの結果エラー箇所がないと以下のようなログが出力される。

Running "lint:all" (lint) task
Lint free.

Done, without errors.

エラーがあると以下のようログが出てしまう。

Running "lint:all" (lint) task
Linting sample1.js...ERROR
[L34:C2] Missing semicolon.
}

<WARN> Task "lint:all" failed. Use --force to continue. </WARN>

Aborted due to warnings.

これはsample1.jsの３４行目の２列でセミコロンを忘れているので失敗しました
ということを表している。ので、エラー箇所を直して再度実行

すると、

grunt.js
js/_core/sample1.js
js/_core/sample2.js
js/all.js

がlintされる。

grunt.initConfigの基本的な機能

// Project configuration.
grunt.initConfig({
  // メタデータを記述
  meta: {},
  // ファイル結合
  concat: {},
  // JSHintを用いてlintを実行
  lint: {},
  // UglifyJSを用いてminifyを実行
  min: {},
  // QUnitを用いてtestを実行
  qunit: {},
  // "server" として振る舞う
  server: {},
  // Nodeunitを用いてtestを実行
  test: {},
  // 監視タスクを実行
  watch: {},
  // JSHintのグローバル設定オプション
  jshint: {},
  // UglifyJSのグローバル設定オプション
  uglify: {}
});

これらを使ってgruntfileを構成していく。

この中で自分が使いそうなtaskは

watch
concat
min

くらいかな。。。

なんかwatchがすごく便利そうなので少し詳しく見ていく。

watchタスク

以下のようなgrunt.jsを記述する。

grunt.initConfig({
  concat: {
    dist: {
      src: ['js/_core/sample1.js', 'js/_core/sample1.js'],
      dest: 'js/all.js'
    }
  }
  min: {
    dist: {
      src: ['js/all.js'],
      dest: 'js/all.min.js'
   }

  watch: {
	files: [
		'js/_core/*.js'
	],
	tasks: 'concat min'
    },
});

このファイルに対してターミナルで、

$ grunt watch

を実行すると、js/_coreのディレクトリにあるjsファイルが変更された時にconcat,minタスクを実行するというものだ。
つまり、jsファイルにに変更を加えるとそれらがall.jsというファイルにまとめられて,minifyされたall_min.jsというファイルが生成されるのだ。

なので、とりあえず作業をするときはこのへんの設定を先に行なってしまうと、作業がサクサクとすすめられそう。

参考サイト

grunt/docs/task_min.md at master · gruntjs/grunt · GitHub