# Gruntでbrowserify使ってCoffeescriptをコンパイルする。

- リンク: https://torounit.com/blog/grunt%e3%81%a7browserify%e4%bd%bf%e3%81%a3%e3%81%a6coffeescript%e3%82%92%e3%82%b3%e3%83%b3%e3%83%91%e3%82%a4%e3%83%ab%e3%81%99%e3%82%8b%e3%80%82/
- 公開日: 2014-08-05T10:00:21+09:00
- 作成者: Toro\_Unit

なんかCoffeescriptをGruntでコンパイルして、concatしたりとかだるいなーってずーっと
思ってました。
 Classとかを他のファイルから参照しようとするとwindow.classNameとか@
classNameとかにしないといけないですし、ファイル名順に結合するので、アルファベット
順で後ろにくるクラスを読もうとするとエラー吐いたり、いまいち依存関係が見えなかっ
たり。

小規模な開発であれば問題ないのですが、Coffeescriptで大量にClassを作ったりすると、
結構大きな問題になってきます。かといってrequire.jsとか面倒くさい。

というわけで、最近流行の[browserify](http://browserify.org/)を使ってみました。

[npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発](http://efcl.info/2014/0120/res3605/)

[Browserify: それはrequire()を使うための魔法の杖](http://qiita.com/cognitom/items/4c63969b5085c90639d4)

ざっくり言うと、ブラウザで、node.jsのようなrequireが使えるようになるツールです。

たとえば、以下のようなHoge.coffeeがあるとすると

    ```decode:true
    class Hoge
        piyo: ->

    module.exports = Hoge
    ```

以下のコードで、読み込んでくることができるという代物です。

    ```decode:true
    Hoge = require("./Hoge")
    hoge = new Hoge()
    ```

debowerifyとかをtransformに指定しておくと、bowerでインストールしたモジュールなんか
も取ってこれるので、大変素敵です。

    ```decode:true
    $ = require("jquery")
    ```

それをgruntでファイル監視して自動化するようにしたのがこちらです。

    ```decode:true
    module.exports = function(grunt) {
      grunt.initConfig({
        dir: {
          coffee: 'coffee',
          javascripts: 'javascripts'
        },
        esteWatch: {
          options: {
            dirs: [ 'coffee/**' ],
            extensions: ['coffee'],
          }
          coffee: function(filepath) {
            return ["browserify"];
          }
        },
        browserify: {
          dist: {
            files: {
              'javascripts/all.js': ['coffee/all.coffee']
            },
            options: {
              transform: ['coffeeify', "debowerify"],
              browserifyOptions: {
                extensions: ['.coffee']
              }
            }
          }
        }
      });
      grunt.loadNpmTasks('grunt-browserify');
      grunt.registerTask('default', ['esteWatch']);
    };
    ```

transformにcoffeeifyを設定しておくと、CoffeeScriptでもコンパイルできるようになり
ます。
 browserifyOptionsのextensionsに.coffeeを指定しておくと、CoffeeScriptのファイル
でも拡張子を省略してrequireできました。

名前空間も汚染しないし、依存するClass等は明示的になるし、読み込み順に左右されない
JSを書くことができるようになります。その代わり、$ = require(“jquery”)等は各ファイル
で行う必要があります。実行時には一度しか読み込まれないようなので、パフォーマンス
的にもよろしいです。

GruntでBowerしたり、Coffeeしたり、ConcatしてJSを書いている人にはホントに便利です。