動かざることバグの如し

近づきたいよ 君の理想に

CoffeeScriptの実行環境を整えるまで

実行したいだけなら簡単

単純に「実行」だけしたいなら

<script src="//coffeescript.org/extras/coffee-script.js"></script>
<script src="script.coffee" type="text/coffeescript"></script>

でscript.coffeeにCoffeeScript書けば自動的にコンパイルされて実行される。

だけどこれだとコード書くときデバッグが全くできない

そこで「Grunt」というビルドツールを使う。まぁつまりNodeを使うってことである。

インストール

まずはグローバルにGruntをインストール

npm install -g grunt-cli

適当なディレクトリを作る。以下はそのディレクトリ上での話 package.jsonの生成

npm init

gruntをこのディレクトリ上にもインストール　-Sまたは--save-devオプションをつけることでさっき生成したpackage.jsonにGruntに依存することが明記される

npm install grunt grunt-contrib-coffee grunt-contrib-connect -S

ディレクトリ上に「www」ディレクトリを作成し、「src」と「js」ディレクトリも作成。src/test.jsに適当なCoffeeScriptを書く

class Man
  constructor: (@name, @age) ->

  greet: (arg) ->
    console.log 'Hello I\'m ' + @name + "!";

h = new Man "Hosomichi", 30
h.greet()

さらにwww上にindex.htmlを作成

//index.html
<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/test.js"></script>
</head>
<body>
<h1>Hello World!!!</h1>
</body>
</html>

最後にGruntfile.jsを作成し以下のように

module.exports = function (grunt) {
    grunt.initConfig({
        coffee:{
            compile:{
                files:[{ 
                    expand: true,
                    cwd: 'www/src/',
                    src: ['**/*.coffee'],
                    dest: 'www/js/',
                    ext: '.js',
                }]
            }
        },
        connect: {
            local: {
                options: {
                    keepalive: true,
                    port: 8080,
                    base: 'www'
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.registerTask("default", ['coffee','connect']);
};

最終的にはこんな感じ

|-- Gruntfile.js
|-- package.json
`-- www
    |-- index.html
    |-- js
    |   `-- test.js（gruntによって自動生成される）
    `-- src
        `-- test.coffee

これでgruntコマンドを叩いてhttp://192.168.1.xxx:8080/にアクセスすれば表示されるはず