Jump to the content

ストレスフリーなGruntタスクの自動読み込み

npm

    Gruntfileの中でパッケージの読み込みを羅列して書くのが非常に面倒くさいと思うことがあります。
    特に後から追加したり、やっぱり使わなかったということが多々ありますよね。
    そこでGruntの設定に少しでも時間を取られないために読み込みを自動化します。

    通常の読み込み

        grunt.loadNpmTasks('grunt-contrib-connect');
        grunt.loadNpmTasks('grunt-contrib-compass');
        grunt.loadNpmTasks('grunt-contrib-coffee');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-open');
    

    タスク読み込みの自動化

    package.jsonの設定を読み込む

    'use strict';
    
    module.exports = function (grunt) {
    
        grunt.initConfig({
            // プロジェクトのpackage.jsonを読み込む
            pkg: grunt.file.readJSON('package.json'),
    
            connect: {
                ...
            },
            compass: {
                ...
            }
            coffee: {
                ...
            }
            open: {
                ...
            }
            uglify: {
                ...
            }
            watch: {
                ...
            }
        });
    
        // package.json内のdevDependenciesオブジェクトのキー名で
        // 「grunt-」で始まるものを読み込む
        for(task in grunt.config.data.pkg.devDependencies) {
            if(/^grunt-/.test(task)) {
                grunt.loadNpmTasks(task);
            }
        }
    
    };
    

    Gruntfile.jsの他にGruntfile.coffeeでも

    個人的にはGruntを使う時のGruntfileはJavascriptではなくてcoffeescriptを使って書いています。
    Grunt自体にcoffeescriptが内包されているので、以下のようにcoffeescriptで記述できるわけです。 そっちのほうが直感的で単純に見やすい。

    'use strict'
    
    module.exports = (grunt) ->
    
        grunt.initConfig
    
            pkg: grunt.file.readJSON 'package.json'
    
            connect:
                ...
            compass:
                ...
            coffee:
                ...
            open:
                ...
            uglify:
                ...
            watch:
                ...
    
        for task of grunt.config.data.pkg.devDependencies
            if /^grunt-/.test task then grunt.loadNpmTasks(task)
    
    

    他にも

    自分は使っていないけど、こうゆうパッケージもあります。
    load-grunt-tasks

    上で紹介したやり方で簡潔に書けるので、load-grunt-tasksは使っていません。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×