k-factory

html5, javascript, css, Unity, Three.js

gruntの自分task作成

我が担当コンテンツはgrunt.js(v0.4.1)を利用した開発運用をしているのですが、
今日flashのextension、Toolkit for CreateJSに関連したカスタムgruntタスクを作成しました。
(これに関しては近日中にplugin化して公開予定です。)
(公開しました。→ Toolkit for CreateJSのmanifestデータを自動でbase64化するgruntタスク

思った以上に簡単に作れる上、色々なことができることを知りました。

「gruntでこんなことできないかな?」と思うときにまずpluginを探すでしょうが無いことも多く、
また機能ごとに色んなものをつなげて行くと、taskがどんどんと増えてごちゃごちゃしてきて
管理がめんどくせ〜ってなことありませんでしょうか。

 そんな時は独自に作るというのも手だということがわかりました。

■まずはオリジナルのタスクを作ってみる。

  • Hello World的なことはこのページが大変参考になりました。というかこの通りです。

     ・[Grunt]自分でtaskを定義して使ってみよう
      http://dev.classmethod.jp/tool/grunt-plugin1/

    「tasks」というディレクトリを作り(tasksという名前は任意です)、「mytask.js」を作ります。tasks/mytask.jsの中身は

    var grunt = require('grunt');
    module.exports = function(grunt) {
        //第一引数にこのタスクの名前を書きます。
        //第二引数は説明文ですのでお好きに。
        //第三引数に処理関数を定義します。
        grunt.registerTask('mytask', 'my task discription', function() {
            //処理を書く
            grunt.log.writeln('exec mytask!')
        });
    };
    

    上記がカスタムtaskのテンプレートの用なものだとしましょう。

  • 続いて「gruntfile.js」の中身を更新します。
    grunt.initConfigの定義文に先ほど定義した
    mytask」を設定しましょう。watchとかconcatとかと同列のところにです。

    
    module.exports = function () {
    
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
    
        watch : {
    
    //~~~~~~  省略  ~~~~~~~
        },
    
        mytask : {
          param_1:'hoge'
        }
    //~~~~~~  省略  ~~~~~~~
      })
    
      //「tasks」フォルダ内のtask定義されたjsファイルを全て読み込んでくれます。
      grunt.task.loadTasks("tasks");
    }
    
  • コマンドラインを開き下記コマンドを実行します。
     $ grunt mytask
    

    exec mytask!」とコンソールに表示されたなら成功です。

  • gruntfileで指定した「param_1」の引数を取りたい場合。
    mytask.jsを下記のように書き換えてみます。

    var grunt = require('grunt');
    module.exports = function(grunt) {
        //第一引数にこのタスクの名前を書きます。
        //第二引数は説明文ですのでお好きに。
        //第三引数に処理関数を定義します。
        grunt.registerTask('mytask', 'my task discription', function() {
            //処理を書く
            var config = grunt.config('mytask');
            grunt.log.writeln(config.param_1);
        });
    };
    

    そしてふたたびコマンドを実行します。

     $ grunt mytask
    

    するとgruntfile.jsでparam_1に指定した「hoge」という文字が出たのではないでしょうか。
    こんな形でファイルパスなどを渡します。

■まとめ

こんな感じでカスタムtaskを作成する準備は終わりです。

さてここから何をするかですが、その前に何が出来るかですよね。

gruntのAPIリファレンスはとても簡潔にまとめられています。
http://gruntjs.com/api/grunt

また嬉しい日本語リファレンスもあります。
http://js.studio-kingdom.com/grunt/api

これをみればどんなことが出来るかがおおよそわかると思います。

ファイルを作成、コピー、削除できたり、
ファイルの中身をロード、検索、置換できたり、
そもそもコマンドを叩けたり、

とまぁ色々できるわけで、応用次第ではgruntによる運用を
さらに彩りあるものにできるということではないでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です