Gruntfile.jsの設定をファイル分割する[grunt]

grunt

Gruntfile.jsに様々なタスクを設定すればするほど、ファイルが肥大化してしまいます。

そんな時はGruntfile.jsに設定したタスクをタスク毎にファイル分割しましょう。

やり方は簡単です。

下記githubのコミット履歴を参考にしてください。

https://github.com/cowboy/wesbos/commit/5a2980a7818957cbaeedcd7552af9ce54e05e3fb

Ex. cleanタスク

grunt/contrib-clean.jsを作成し、形式に従ってタスクを記述します。

grunt.config()の第一引数がタスク名で、第二引数はGruntfile.js記載していたcleanの各タスクです。

※掲載している例はyeomanのgenerator-mobileで生成されたGruntfile.jsを元にしています。

'use strict';

module.exports = function(grunt) {

    grunt.config('clean', {
        dist: {
            files: [{
                dot: true,
                src: [
                    '.tmp',
                    '<%= yeoman.dist %>/*',
                    '!<%= yeoman.dist %>/.git*'
                ]
            }]
        },
        server: '.tmp'
    });

};

Gruntfile.jsに定義していたcleanのタスクを削除し、下記を追加するだけです。

grunt.loadTasks('grunt');

また、冒頭で紹介した例だと、分割した各タスクファイルで、

grunt.loadNpmTasks('grunt-contrib-clean');

のように利用するタスクモジュールのロードを行っていますが、

Gruntfile.jsで

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

または、load-grunt-tasksを利用し、

require('load-grunt-tasks')(grunt);

とすることで、一括でnode_modules/grunt-xxxxx/のタスクをロードすることができます。

上記を設定したら、cleanタスクを実行してみましょう。

$ grunt clean

Running "clean:dist" (clean) task Cleaning ".tmp"...OK Cleaning "dist/.htaccess"...OK Cleaning "dist/404.html"...OK Cleaning "dist/favicon.ico"...OK Cleaning "dist/index.html"...OK Cleaning "dist/robots.txt"...OK Cleaning "dist/scripts"...OK Cleaning "dist/styles"...OK

Running "clean:server" (clean) task

Done, without errors.

無事タスクが実行されましたね。

どんどんファイル分割するのはよいのですが、私の場合、connectとuseminだけはGruntfile.jsに設定したままにしています。

livereloadの設定がうまくできなくなってしまう問題と、useminの関連タスクが分かりづらくなってしまうためです。