헤일로 월드

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

하고 싶은 일

coffee-script , jade , stylus 을 컴파일한다.

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

  public_html

컴파일 후

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

1. 컴파일러 시작

$ npm start
$ open public_html/index.html

npm start 하려면 다음 두 구성 파일이 필요합니다.

1. ./gulpfile.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

2. ./package.json

  {
    "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"
    }
  }

지정된 폴더에 컴파일 된 파일을 만들 수 있습니다. 단독으로 실행할 때는 $ gulp coffee-script

2. 파일 모니터링

이대로는 변경할 때마다 컴파일러를 재실행해야 한다. 파일이 변경되거나 작성되었을 때 자동으로 실행되도록 설정한다.

1. ./gulpfile.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'

2. ./package.json 의 "dependencies" 에 "gulp-watch": "^3.0.0" 를 추가한다.

e.g. $ npm install gulp-watch --save

$ npm start

gulp-watch는 watch(files,function) 같이 쓴다. files 는 문자열 또는 배열로 path/to/file.ext , 와일드카드 * , ** 를 사용할 수 있다.
$ npm start 를 실행하면 파일의 감시 상태가 됩니다. 이 상태에서 files를 작성, 변경, 삭제하면 function가 실행됩니다.

3. 브라우저 재로드

욕심을 말하면, 브라우저의 리로드도 자동으로 실시하고 싶다. 에디터 옆에 브라우저를 두면, 아마 키보드의 수명은 늘어날 것이다.

1. ./gulpfile.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()

./package.json 의 "dependencies" 에 "gulp-connect": "^2.2.0" 를 추가한다.

e.g. $ npm install gulp-connect --save

$ npm start

livereload.server는 인수의 루트를 모니터링합니다. Server started http://localhost:8080 와 메시지를 반환하므로 브라우저에서 URL을 엽니다.

─── 이것으로 당신도 Getting started.

원래 git이든 npm이든 gulp을 모르겠다.

설정 방법 Mac/Windows

각각 검은 화면에서 명령을 두드리고 반응하게되면 제대로 설치할 수 있습니다.
windows의 사람은 GitBash cmder