読者です 読者をやめる 読者になる 読者になる

endokのブログ

IT・プログラミングネタ

grunt-contrib-coffeeでは最初のドットまでが同じcoffeeファイルは連結される

軽い気持ちでMEANスタックに触ってみたところ、npm,Gruntなどなど慣れないものばかりでハマりまくっています。

今回はcoffeeファイルをjsファイルに変換する際のGruntの挙動についてです。

現象

generator-angular-fullstackで生成したアプリケーションにて、
下記のようなcoffeeファイルがある場合。

$ ls client/app/main
main.coffee  main.controller.coffee

grunt serveで起動したHTMLを見てみると、

<script src="app/main/main.js"></script>

という記述のみで、main.controller.jsの読み込みはない。

main.jsの中身を見るとmain.coffeeとmain.controller.coffeeを連結した中身になっていた。

grunt-contrib-coffeeの挙動として連結されているのか?それとも別のプラグインの影響なのか?検証してみる。

検証

適当なフォルダにgrunt-contrib-coffeeを試すためのファイルを配置する。

{
  "name": "coffee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-coffee": "^0.12.0"
  }
}
  • Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    coffee: {
      compile: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.coffee'],
          dest: 'dest/',
          ext: '.js',
        }]  
      }   
    }   
  }); 
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.registerTask('default', 'coffee');
};
  • src/sample.coffee
variable = 100
  • src/sample.test.coffee
variable = 50

設置できたら、npmパッケージをインストールしてcoffeeタスクを実行。

$ npm install
$ grunt coffee

すると、
dest/sample.js
が出力される。

中身は

(function() {
  var variable;

  variable = 100;

}).call(this);

(function() {
  var variable;

  variable = 50;

}).call(this);

となっており、sample.coffeeとsample.test.coffeeが連結されていることが確認できる。

同様に、

  • src/sample.coffee
  • src/sample.test.coffee
  • src/sample2.coffee
  • src/sample2.test.coffee

の4ファイルを配置した場合、

  • dest/sample.js
  • dest/sample2.js

の2ファイルが生成される。

まとめ

結論としては、grunt-contrib-coffeeが複数ファイルコンパイルを行うときにこういった連結を行うということで良さそうです。
知っている人には当然ぽい挙動かと思いますが、何で検索したらいいかわからずでした。
近い話題としては下記が見つかりました。
coffeescript - grunt-contrib-coffee one-to-one compile - Stack Overflow
Gruntの理解にはまだまだかかりそうです。