JSDuckでCoffeeScriptから生成したJSファイルのドキュメントを生成するメモ

メモです。

JSDuckは"/** ... */"の内容からドキュメントを生成するらしいのですが、CoffeeScriptのブロックコメントである"### ... ###"だと"/* ... */"になってしまいます。なので、CoffeeScriptのブロックコメントを"###* ... ###"にすればOKでした。
https://github.com/senchalabs/jsduck/issues/12

GruntでCoffeeScriptとSCSSのファイルを監視して自動コンパイルしてみる

Grunt公式: http://gruntjs.com/

1. grunt-cliのインストール

$ npm install -g grunt-cli

2. 作業ディレクトリの作成

$ mkdir grunt_test
$ cd grunt_test

3. package.jsonの作成

vim package.json

4. package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
  }
}

5. gruntと必要なプラグインのインストール

$ npm install grunt grunt-contrib-watch grunt-contrib-coffee grunt-contrib-sass --save-dev

* --save-devオプションをつけるとpackage.jsonの"devDependencies"を上書きしてくれるみたいです。
* "description"とか書いてないので警告が出ます。
* grunt-contrib-watch: https://github.com/gruntjs/grunt-contrib-watch
* grunt-contrib-coffee: https://github.com/gruntjs/grunt-contrib-coffee
* grunt-contrib-sass: https://github.com/gruntjs/grunt-contrib-sass

6. Gruntfile.jsの作成

$ vim Gruntfile.js

7. Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        coffee: {
            compile: {
                expand: true,
                flatten: true,
                src: ['coffee/*.coffee'],
                dest: 'js',
                ext: '.js'
            }
        },
        sass: {
            compile: {
                expand: true,
                flatten: true,
                src: ['scss/*.scss'],
                dest: 'css',
                ext: '.css'
            }
        },
        watch: {
            coffee: {
                files: ['coffee/*.coffee'],
                tasks: ['coffee']
            },
            sass: {
                files: ['scss/*.scss'],
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.registerTask('default', ['coffee', 'sass']);
};

8. 監視開始

$ mkdir coffee
$ touch coffee/hello.coffee
$ mkdir scss
$ touch scss/test.scss
$ grunt watch
Running "watch" task
Waiting...

9. coffee/hello.coffeeを編集

console.log 'hello'

10. コンパイルされたファイルを確認

$ more js/hello.js 
(function() {
  console.log('hello');

}).call(this);

11. scss/test.scssを編集

#main {
  h1{ margin: 10px }
  p{ font-size: 90% }
}

12. コンパイルされたファイルを確認

$ more css/test.css 
#main h1 {
  margin: 10px; }
#main p {
  font-size: 90%; }

npmでCoffeeScriptをインストールしてコンパイルしてみるメモ

メモです。

# CoffeeScriptのインストール
$ npm install -g coffee-script

# hello.coffeeの作成
$ mkdir coffee
$ cd coffee
$ vim hello.coffee

# hello.coffeeに以下を記述
console.log 'hello'

# コンパイルと内容の確認
$ coffee -c hello.coffee
$ more hello.js
// Generated by CoffeeScript 1.6.3
(function() {
  console.log('hello');

}).call(this);

# ヘルプコマンドを実行
$ coffee -h

Usage: coffee [options] path/to/script.coffee -- [args]

If called without options, `coffee` will run your script.

  -b, --bare         compile without a top-level function wrapper
  -c, --compile      compile to JavaScript and save as .js files
  -e, --eval         pass a string from the command line as input
  -h, --help         display this help message
  -i, --interactive  run an interactive CoffeeScript REPL
  -j, --join         concatenate the source CoffeeScript before compiling
  -m, --map          generate source map and save as .map files
  -n, --nodes        print out the parse tree that the parser produces
   --nodejs       pass options directly to the "node" binary
  -o, --output       set the output directory for compiled JavaScript
  -p, --print        print out the compiled JavaScript
  -s, --stdio        listen for and compile scripts over stdio
  -l, --literate     treat stdio as literate style coffee-script
  -t, --tokens       print out the tokens that the lexer/rewriter produce
  -v, --version      display the version number
  -w, --watch        watch scripts for changes and rerun commands

変更の監視は

$ coffee -wc *.coffee

で出来ました。