最近、`Gruntfile.js`が長くて辛いので、楽をするため次の npm モジュールをほぼ利用しています。

- [sindresorhus/load-grunt-tasks](https://github.com/sindresorhus/load-grunt-tasks)
- [firstandthird/load-grunt-config](https://github.com/firstandthird/load-grunt-config)

ただ、内部のタスクロードの仕組みを知らないと、意外なところでつまづくものです。
今日は、その辺りのハマりポイントについて紹介します。



## 特定のタスクが実行できない！！なぜ！？

`npm install`でタスクをインストールしているにも関わらず、タスクが見つからないとのエラーが発生する場合は、
以下のコマンドで、実行可能なタスクを確認してみてください。

```
grunt -h
```

コマンドを実行すると`Available tasks`に実行可能なタスクの一覧が表示されます。

```
Available tasks
             copy  Copy files. *
           coffee  Compile CoffeeScript files into JavaScript *
           concat  Concatenate files. *
           jshint  Validate files with JSHint. *
          connect  Start a connect web server. *
            clean  Clean files and folders. *
            watch  Run predefined tasks whenever watched files change.
             open  Open urls and files from a grunt task *
 configureProxies  Configure any specified connect proxies.
           server  Custom task.
          default  Alias for "server" task.
```

この一覧にタスクが存在しない場合、なんらかの理由でロード対象から漏れている可能性があります。

## load-grunt-tasks でのロードタスクの選択

`load-grunt-tasks`内部では次のようなパターンマッチングでロードするファイルを選択しています。

```js
// require('load-grunt-tasks')(grunt); と同じ意味です
require("load-grunt-tasks")(grunt, {
  pattern: ["grunt-*", "@*/grunt-*"],
});
```

つまり、`grunt-`で始まらないタスクについては、デフォルトではロードされない仕組みになっています。
上記のパターンに一致しないタスクについては、`pattern`に追加することでロードすることが可能です。

```js
require("load-grunt-tasks")(grunt, {
  pattern: ["grunt-*", "@*/grunt-*", "oreore-task"],
});
```

これで、`grunt-`に一致しないタスクも無事ロードすることができます。

## load-grunt-config でのロードタスクの指定方法

内部で`load-grunt-tasks`を呼び出しているので、次のようにします。

```js
require("load-grunt-config")(grunt, {
  loadGruntTasks: {
    pattern: ["grunt-*", "@*/grunt-*", "oreore-task"],
  },
});
```

> 参考
> [Grunt --help does not show loaded tasks. · Issue #124 · firstandthird/load-grunt-config](https://github.com/firstandthird/load-grunt-config/issues/124)

これで、`load-grunt-tasks`でも`grunt-`に一致しないタスクを無事ロードすることができます。

## まとめ

最近手放せない`load-grunt-tasks`と`load-grunt-config`についての小ネタでした。

Grunt タスクは、`grunt-`という名前で始まるものが多いので、少し気にはなっていたのですが、
背後にはこのようなエコシステムがあったのですね。

load-grunt-tasksやload-grunt-configでタスクがロードされない場合の対処法

最近、Javascript の実装なるべく楽したいので、CoffeeScript を書いています。
当然、ブラウザは CoffeeScript を解釈できないため、Javascript にコンパイルする必要があるのですが、やっぱここでも Grunt です。
Grunt での CoffeeScript のコンパイル方法について、個人的に調べたので少しまとめます。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/coffee1.png)

1.  シンプル（1->1 または n->1）
2.  マルチ（n->n）
3.  マルチ（n->n）＋ちょっとカスタム
4.  まとめ

最初に、CoffeeScript をコンパイルする Grunt プラグインですが、こちらを使います。
[https://github.com/gruntjs/grunt-contrib-coffee](http://gruntjs/grunt-contrib-coffee)

node.js がインストールされている環境で、次のコマンドを実行してください。

```
npm install grunt-contrib-coffee --save-dev
```

インストールしたら、Gruntfile.js にてプラグインを有効化します。

```
grunt.loadNpmTasks('grunt-contrib-coffee');
```

## 1.シンプル（1->1 または n->1）

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/coffee2.png)

まずは、最も単純なタスクです。1 つの「.coffee」ファイルを「.js」にコンパイルしたり、複数の「.coffee」を 1 つの「.js」にまとめます。コンパイルした Javascript は後続の Uglify タスクで minify したり難読化したりします。

良く使われるケースだと思います。Grunt タスクはこんな感じで書きます。

```js
coffee: {
  compile: {
    files: {
      // 1:1 コンパイル
      'path/to/result.js': 'path/to/source.coffee',
      // コンパイルして１つのファイルに結合
      'path/to/another.js': ['path/to/sources/*.coffee', 'path/to/more/*.coffee']
    }
  }
}
```

## 2.マルチ（n->n）

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/coffee3.png)

次は、コンパイル時に 1 つの Javascript とせず、フォルダ構成などを維持したまま CoffeeScript をコンパイルする方法です。JavascriptMV＊系フレームワークを使っていると割と遭遇するケースです。
Grunt タスクはこんな感じです。

```js
coffee: {
  compile: {
    // path/toにあるCoffeeScriptをpath/to/dest/にコンパイルします
    expand: true,
    flatten: false,
    cwd: 'path/to',
    src: ['*.coffee'],
    dest: 'path/to/dest/',
    ext: '.js'
  }
}
```

Grunt では、ファイルの指定を動的に行うための DynamicMapping という仕組みを持っていて、今回はこれを使ってます。詳しくは本家のページをどうぞ。

Configuring tasks - Grunt: The JavaScript Task Runner
[ http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically](http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically)

## 3.マルチ（n->n）＋ちょっとカスタム

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/coffee4.png)

最後は、ちょっと特殊（？）です。「.」が 2 つ以上あるファイルのコンパイルです。
上の方法で普通にコンパイルすると「hoge.view.coffee」が「hoge.js」になってしまいます。

これは Grunt では最初の「.」の所までがファイル名で、それ以降は拡張子と扱う仕様となっているからです。そこでコンパイル時の拡張子を判定する処理をカスタムすることにしました。Grunt タスクはこんな感じです。

```js
coffee: {
  compile: {
    // path/toにあるCoffeeScriptをpath/to/dest/にコンパイルします
    expand: true,
    flatten: false,
    cwd: 'path/to',
    src: ['*.coffee'],
    dest: 'path/to/dest/',
    // extには「view.coffee」が渡されてきます
    // returnで拡張子を返せばいいので、「view.js」を返してます
    ext: function(ext){
      return ext.replace(/coffee$/, 'js');
    }
  }
}
```

## 4.まとめ

CoffeeScript のコンパイル環境を 1 から作ってみたので、いろいろ試行錯誤した点をまとめてました。
ただ、最近は IDE の方で自動コンパイルするものが多いので、ちょこっと書く分には無理に Grunt 使う必要はないと思います。

結構、UI コンポーネントを持つ JavascriptMV\*系フレームワークだと、View 部分を Javascript でガリガリ書くことになるので、CoffeeScript が重宝しています。
まだまだ CoffeeScript 使いこなせてないのですが、しっかり味見してエンタープライズで使えるか評価していきたいですね。

Gruntを使ってCoffeeScriptをいろいろコンパイルする

私が担当するエンタープライズのフロント開発では、1 年ほど前から Grunt によるビルドプロセスを導入していて、自分でもプロジェクトの特性に応じて Gruntfile.js のタスクをデザインする機会が多いのですが、最近流行の Yeoman が吐き出す Gruntfile.js を見るとなかなか参考になる点があったので、いくつか紹介したいと思います。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/yeoman-logo.png)

### 目次

1.  load-grunt-tasks
2.  テンプレート
3.  ファイル指定方法あれこれ
4.  外部パラメータによるタスクの分岐処理
5.  外部定義ファイルインポート

## 1. load-grunt-tasks

[load-grunt-tasks](https://github.com/sindresorhus/load-grunt-tasks)とは package.json に定義されている Grunt タスクを見て、タスク起動時にロードしてくれるモジュールです。これでタスクを変更するたびに Gruntfile.js を変更する必要がなくなりました。

```js
/**
 * before
 */
grunt.loadNpmTasks("grunt-shell");
grunt.loadNpmTasks("grunt-sass");
grunt.loadNpmTasks("grunt-recess");
grunt.loadNpmTasks("grunt-sizediff");
grunt.loadNpmTasks("grunt-svgmin");
grunt.loadNpmTasks("grunt-styl");
grunt.loadNpmTasks("grunt-php");
grunt.loadNpmTasks("grunt-eslint");
grunt.loadNpmTasks("grunt-concurrent");
grunt.loadNpmTasks("grunt-bower-requirejs");

/**
 * after
 */
require("load-grunt-tasks")(grunt);
```

## 2. テンプレート

Grunt には[Underscore.js](http://underscorejs.org/#template)ライクなテンプレートエンジンが内包されています。

`<%=%>`とすることで、中のプロパティが純粋な Javascript として評価され、Gruntfile.js 内に展開されます。

また、`<%=%>`とすることで、任意の Javascript コードを実行させることも可能です。

Yoeman の中では、開発用のディレクトリとビルド用のディレクトリパスを使い分けてます。こちらも、タスク内でよく使う定義情報などはファイルの先頭で定義しておいて、テンプレートで挿入すると後々メンテナンスし易いですね。

```js
grunt.initConfig({
  yeoman: {
    // Configurable paths
    app: "app",
    dist: "dist",
  },

  copy: {
    dist: {
      files: [
        {
          expand: true,
          dot: true,
          cwd: "<%= yeoman.app %>", // <- ここ
          dest: "<%= yeoman.dist %>", // <- ここ
          src: ["*.{ico,png,txt}"],
        },
      ],
    },
  },
});
```

## 3. ファイル指定方法あれこれ

Gruntfile.js でタスクを書いていると、ファイルのマッチング指定を書く部分がほとんどだと思います。

内部的にファイルのマッチングには Glob と呼ばれる仕組みを使っており、[node-glob](https://github.com/isaacs/node-glob)と[minimatch](https://github.com/isaacs/minimatch)のライブラリが使われています。本当に様々なマッチング機能を提供しているのライブラリなのですが、今回は Yeoman でよく使っている範囲で紹介します。

### 「\*」

「/」パス以外の任意の文字列と一致します。次のように使われることがよくあります。

- フォルダ以下一致「vender/\*」
- 任意のファイル一致「\*.js」
- 任意のファイル名一致「.git\*」

### 「{}」

中の文字をカンマ区切りで指定して or 条件とします。次のように使われることがよくあります。

- 拡張子の or 条件「\*.{gif,jpeg,jpg,png,svg,webp}」

### 「`{,*/}`」って何？

Yeoman の Gruntfile.js でよく見る「`{,*/}`」ですが、任意のフォルダ以下の 1 階層のみ一致という意味です。  
サブフォルダ指定する場合は通常「`**`」でいいのですが、パフォーマンス的な理由で 1 階層に止めたい場合は、「`{,*/}`」を使います。

この当たりも、使いこなすことで余計なファイルマッチングを書く必要がなくなります。（Glob 形式が読めない人がいるという別の問題があるとは思いますが w）

## 4. 外部パラメータによるタスク分岐

Grunt タスクを呼び出す場合の次のように「`:`」以降の文字列をパラメータとして渡すことができ、Grunt タスク内で分岐処理を行うことができます。

```
grunt serve:dist
```

通常は`grunt.registerTask`の第 2 引数にタスクの文字列を配列で渡すのですが、ここにコールバック用の function を渡すことで、タスク呼び出し時の処理をある程度柔軟に書くことができます。
とはいえ、可読性という観点では使いどころ微妙かな。。。と

```js
// 普通はこんな感じ
grunt.registerTask("serve", [
  "clean:server",
  "concurrent:server",
  "autoprefixer",
  "connect:livereload",
  "watch",
]);

// grunt serve:distと呼ぶことタスクの中で分岐ができる
grunt.registerTask("serve", function (target) {
  if (target === "dist") {
    return grunt.task.run(["build", "connect:dist:keepalive"]);
  }

  grunt.task.run([
    "clean:server",
    "concurrent:server",
    "autoprefixer",
    "connect:livereload",
    "watch",
  ]);
});
```

## 5. 外部定義ファイルのインポート

Yoeman の generator 界隈ではあまり見かけないのですが、知っていると便利な機能です。

Grunt では json と YAML の外部定義ファイルをインポートする機能が内包されています。次の例 Grunt 公式の例ですが、package.json から定義情報をインポートしています。

```js
grunt.initConfig({
  pkg: grunt.file.readJSON("package.json"),
  uglify: {
    options: {
      banner:
        '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
    },
    dist: {
      src: "src/<%= pkg.name %>.js",
      dest: "dist/<%= pkg.name %>.min.js",
    },
  },
});
```

## まとめ

Yeoman に学ぶモテる Gruntfile.js の書き方いかがだったでしょうか。

いままでオレオレ Gruntfile.js を書いている方も、モテ期を謳歌している Yeoman が作る Gruntfile.js を読んで、もっとモテる Grunt タスクを書いてみましょう！

**p.s**

いつの間にか generato-webapp の`grunt server`が deprecated になっていることだし、時代の流れは早いものですね。  
こんな記事書いておいて、流行に流されるのも注意しないとなーっと思う今日この頃です。

Yeomanに学ぶモテるGruntfile.jsの書き方

Backbone.js でアプリケーションを作る場合、ついつい手軽さを求めて[Underscore.js の template()](http://underscorejs.org/#template)を使うことが多いのですが、少し凝った造りのページを作る場合、より専門的なテンプレートエンジンを使いたくなります。

そこで今回は、最近マイブームの[Handlebars.js](http://handlebarsjs.com/)を Backbone と組み合わせて使ってみました。



### このエントリでお伝えしたいこと。

1.  Backbone.js with Handlebars.js!!
2.  ここでもやっぱり Grunt 最高

## Handlebars.js とは

詳細は Google 先生の方が詳しいです（ごめんなさい）。  
数あるクライアントサイドのテンプレートエンジンの 1 つです。個人的にはプリコンパイルすることでパフォーマンス的に優位なところを注目しています。

[[jsperf]Precompiled Templates](http://jsperf.com/precompiled-hogan-handlebars-ejs)

最近話題の twitter の[Horgan.js](http://twitter.github.com/hogan.js/)ともいい感じに渡り合ってます。

> とは言っても、プリコンパイル前は激遅なんですが。。。

## アプリケーション構成

まず、アプリケーションの構成は次のようなものだと仮定して話を進めます。

```
app
 ├ Gruntfile.js
 ├ hbs
 │ └ partial.hbs //テンプレート
 └ js
   ├ views
   │ └ partial.js //テンプレートをレンダリングするView
   ├ collections
   ├ models
   ├ template.js //テンプレートがプリコンパイルされたJS
   ├ namespace.js
   └ app.js
```

namespace.js

```js
var MyApp = {
  Views: {},
  Collections: {},
  Models: {},
  Templates: {},
};
```

## なにはともあれ最初は Grunt!!

まず、なにか新しいことを始めるためには準備と計画が大事です。  
特に Handlebars.js の場合は、プリコンパイルしない事には使い物にならないので、ビルドプロセスが必須です。
ということで Grunt のタスクを使います。

[grunt-contrib-handlebars](https://github.com/gruntjs/grunt-contrib-handlebars)

Gruntfile.js は次のように書きます。

```js
module.exports = function (grunt) {
  grunt.initConfig({
    //some...

    handlebars: {
      compile: {
        options: {
          namespace: "MyApp.Templates",
          processName: function (filepath) {
            // input -> app/hbs/partial.hbs
            var pieces = filepath.split("/");
            return pieces[pieces.length - 1].replace(/.hbs$/, ""); //output -> partial
          },
        },
        files: {
          "app/js/template.js": "app/hbs/*.hbs",
        },
      },
    },
  });

  // Load the plugin.

  //some tasks...

  grunt.loadNpmTasks("grunt-contrib-handlebars");

  // Default task(s).
  grunt.registerTask("default", ["handlebars"]);
};
```

普段 Grunt 使っている人だったら、さっと見ただけで分かると思うので、compile オプションの大事な所だけ補足します。

#### namespace

プリコンパイルされたテンプレート関数が割り当てられます。デフォルトだと`JST`となるので必要な場合、設定してください。

#### processName

processName とは、（上の）namespase オブジェクトに格納された、プリコンパイル済みテンプレート関数を取り出すためのキーです。デフォルトではファイルパスが設定されるようになっており、次のように取り出すようになっています。`var tmpl = MyApp.Templates["app/hbs/partial.hbs"];`  
個人的には`var tmpl = MyApp.Templates.partial;`と backbone 側から利用したいので、override しています。

これで Grunt の watch タスクと組み合わせることで、hbs ファイルに変更があった際に template.js として自動でプリコンパルされます。Grunt ってほんと便利！

## Backbone と使う

さて本題です。
今回は、Backbone でありがちな、render()で Collection の中身を出力する場合を例に説明します。

まずは、Handlebars.js のテンプレート部分

```
{{#each models}}
<ul>
  <li class="id">{{this.id}}</li>
  <li class="name">({{this.name}})</li>
</ul>
{{/each}}
```

Backbone の View からは次のように呼び出します。

```js
MyApp.Views.partial = Backbone.View.extend({

  //partial.hbsで定義したテンプレート
  tmpl: MyApp.Templates.partial,

  //some...

  render: function() {

    this.$el.html(
      this.tmpl({
        models: this.collection.toJSON()
      })
    );

  },

  //some...
```

Handlebars.js のテンプレート関数にデータを渡す際に、1 回オブジェクトにラップして名前を付ける手間がありますが、これで`BackboneでHandlebars.js`を使うことができました。
Handlebars.js には他にも色々な Expressions があるのですが、同じ原理で大丈夫なはずです。

Tag: grunt

load-grunt-tasksやload-grunt-configでタスクがロードされない場合の対処法

Gruntを使ってCoffeeScriptをいろいろコンパイルする

Yeomanに学ぶモテるGruntfile.jsの書き方

Backbone.jsとHandlebars.jsを組み合わせる