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を試すためのファイルを配置する。
- package.json
{
"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の理解にはまだまだかかりそうです。
