Javascript

JavaScript開発環境

いちいちブラウザを開いてデバッグコンソールでJavascriptの動作確認をするのが面倒なのでnode.jsでいいと思った.

Coffee Script

こちらのサイトを参考に手軽なコンパイル環境を構築.

http://tekkoc.tumblr.com/post/36510565810/coffeescript

yukaary$ npm install -g coffee
# 普通にファイル指定してコンパイル.
yukaary$ coffee --compile coffee/sample.coffee
# cofeeディレクトリ以下のファイルを継続してコンパイル.
yukaary$ coffee -o public/js -w coffee/

cofee単体でもcofee/ディレクトリ下のcoffeeスクリプトを自動でコンパイルしてpublic/jsの下に置いてくるようできる. やったぜ.

Grunt

gruntを使っても同じようにあるディレクトリに配置したcoffeeスクリプトをjavascriptに継続的にコンパイルできる.　ただし、npmで色々とインストールが必要だったり、設定ファイル（Gruntfile.js)を書いたりと結構大変.

# grunt command line interface
yukaary$ npm install -g grunt-cli
yukaary$ which grunt
/Users/yukaary/.nvm/v0.10.29/bin/grunt
# generate empty package.json
yukaary$ npm init
# install grunt kinds
npm install grunt --save-dev
npm install grunt-contrib-coffee --save-dev
npm install grunt-contrib-watch --save-dev
# create Gruntfile.js
vim Gruntfile.js
====================================
// 'use strict';
module.exports = function(grunt) {
  grunt.initConfig({
    watch:{
      coffee: {
        tasks: 'coffee',
        files: ['src/**/*.coffee']
      }
    },
    coffee: {
      compile: {
        files:[{
          expand: true,
          cwd: 'src/',
          src: ['**/*.coffee'],
          dest: 'js/',
          ext: '.js'
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-watch')
====================================

• 「npm init」でpackage.jsonを作成.
• 続く「npm install xxx –save-dev」でnpmパッケージを直下のディレクトリにインストール、同時にpackage.jsonに追記させていく.
• grunt-contrib-coffeeでcoffeescript開発環境
• grunt-contrib-watchで自動コンパイル環境

これにテスト用のnpmパッケージを追加で入れていくくらいなら最初からYeomanでいい気がしてきた…今回はcoffee scriptの勉強が目的なので、自動コンパイルが出来るまででいい.