今更感はありますが、古いプロジェクトだとまだgruntを使っていることは多いと思います。
これだけを抑えておけばGruntはOKという点をまとめました。
インストール
npm install -g grunt-cli
- gruntをコマンドラインで実行するためのインタフェースのこと。
- grunt-cliがインストールされていないと、コマンドラインからgruntを実行することは出来ない。
- コマンドラインで
gruntを実行すると実行階層のGruntFileと同階層にインストールされているgruntがそのバージョンで実行される - これにより、同じマシンで複数のバージョンのgruntを実行することが出来る。
wrapper関数
module.exports = function(grunt) {
// 全てのgruntのコードはこの中に書いていく
};
Gruntの処理を囲うための関数。全ての処理はこの中に記述していく。
initConfig
- grunt.initConfigとはgrunt.config.initへのエイリアスであり、 grunt.config.initとは現在のプロジェクトのための設定オブジェクトの初期化する処理のこと。
- ここで初期化した設定を元にタスクが実行される。
loadNpmTasks
- npmでインストールされたモジュールは
loadNpmTasksでロードすることにより、初めてタスクとして利用することが出来る。
grunt.loadNpmTasks('grunt-contrib-uglify');
- 上記の記述により
uglifyタスクをGruntFile内で利用することが出来る。 - 後述する
load-grunt-configを利用するとこの記述は省略して自動ロードすることも可能。
カスタムタスク
- npmモジュール以外に自身で設定できるタスクのこと。
grunt.registerTaskで設定できる。 - 例えば、grunt実行時にデフォルト実行するタスクは
defaultとしてカスタムタスクを登録する。
// デフォルトタスクの指定
grunt.registerTask('default', ['uglify']);
- 上記のようにしておくと、grunt実行時にuglifyタスクが実行される。
タスク実行時の動作の仕組み
- タスクを実行時にGruntはinitConfigで設定したオブジェクトで同じ名前のプロパティを探す。
- これにより、同じタスク内で複数の構成に応じた実行をすることも可能。
- 例えば、cssの連結処理を実行したい時は
grunt concat:cssのように実行する。 - 各タスクで実際に指定できるオプションはタスクのGithubページを参照する。
grunt.initConfig({
concat: {
css: {
// 連結(concat)タスク"css"ターゲットへのオプションとファイルをここに書く
},
js: {
// 連結(concat)タスク"js"ターゲットへのオプションとファイルをここに書く
}
}
});
テンプレート文字列
-
initConfig内では他タスクの設定を<% %>でアクセスできる。 - <% pkg.name %>のように他の設定から参照可能。
load-grunt-configの利用
-
load-grunt-configを利用すると、肥大化しがちなinitConfigを分割することが出来る。 - 分割するファイルは/grunt配下に設置する
- 例えば、上記の
initConfigの場合は/grunt/concat.jsとすることでconcatタスクの設定を自動的に読み込むことが出来る。 - load-grunt-configの具体的な使い方はGithubの公式サイトがわかりやすいです。
タスクに対応するNPMモジュールを調べる
- タスクの詳細な挙動を確認する時は元のコードを読むのが一番。
- package.jsonにインストールするNPMモジュールが記載されているので、タスク名に近いモジュールを確認しGithubで確認すると応用が聞いていい感じ。