HTML界隈の高級言語を使ってみる ref: http://qiita.com/59naga/items/90f254eefecc81702937

file0.txt

$ git clone https://github.com/59naga/cjsbl.git
$ cd cjsbl/1.first
$ npm start

file1.txt

./
  .coffee
      index.coffee
  .jade
      index.jade
  .styl
      index.styl

  public_html

file2.txt

./
  public_html
      index.js
      index.html
      index.css

file3.txt

$ npm start
$ open public_html/index.html

file4.coffee

  public_html= 'public_html'

  gulp= require 'gulp'
  gulp.task 'default',['coffee-script','jade','stylus']

  gulp.task 'coffee-script',->
    coffee= require 'gulp-coffee'
    gulp.src ".coffee/index.coffee"
      .pipe coffee()
      .pipe gulp.dest public_html

  gulp.task 'jade',->
    jade= require 'gulp-jade'
    gulp.src ".jade/**/*.jade"
      .pipe jade()
      .pipe gulp.dest public_html

  gulp.task 'stylus',->
    stylus= require 'gulp-stylus'
    gulp.src ".styl/index.styl"
      .pipe stylus()
      .pipe gulp.dest public_html

file5.txt

  {
    "dependencies": {
      "coffee-script": "^1.8.0",
      "gulp": "^3.8.10",

      "gulp-coffee": "^2.2.0",
      "gulp-jade": "^0.10.0",
      "gulp-stylus": "^1.3.6"
    },
    "scripts": {
      "start": "npm install && gulp"
    }
  }

file6.coffee

  gulp.task 'watch',->
    watch= require 'gulp-watch'
    watch ".coffee/**/*.coffee",->
      gulp.start 'coffee-script'

    watch ".jade/**/*.jade",->
      gulp.start 'jade'

    watch ".styl/**/*.styl",->
      gulp.start 'stylus'

file7.txt

$ npm start

file8.coffee

  gulp.task 'livereload',->
    livereload= require 'gulp-connect'
    livereload.server
      livereload: true
      root: public_html

    watch= require 'gulp-watch'
    gulp.src "#{public_html}/**"
      .pipe watch "#{public_html}/**"
      .pipe livereload.reload()

file9.txt

$ npm start