평소 집에서는 개발하지 않는 나이지만, 너무 어쩔 수 없어 회사에서는 개발할 수없는 소규모 앱이나 플러그인을 개발하고 싶은 경우가 있습니다.

이번에는 CoffeeScript + gulp을 이러한 집에서의 편의성 개발 환경으로 채택하여 개요 및 도입 방법을 기록했습니다.

CoffeeScript란?

CoffeeScript는 AltJS라는 자바스크립트의 고급 대체언어(소프트 JavaScript를 더 좋은 느낌으로 한 언어)의 하나입니다. AltJS에는 TypeScript, Dart, JAX 등 그 밖에도 몇 가지가 있습니다. 에서 가장 간단하게 기술할 수 있는 것을 선택했습니다. 덧붙여서 평상시의 업무에서는, 편의와는 거리가 먼 Google Closure를 이용하고 있습니다.

AltJS에 공통되는 것은 컴파일 후에 JS를 출력하는 점에서 브라우저는 결국 출력된 JS를 이용합니다. 라는 야심을 가지고 개발되고 있었습니다만, 2015년 3월에 그것을 포기하는 선언이 되었습니다. 유감이군요.
h tp // // ws. 다 rtぁg. 오 rg/2015/03/다 rt-후r-엔치레-우 b. HTML

gulp이란?

Node.js 기반의 빌드 툴입니다. CoffeeScript나 Sass를 컴파일하거나 lint하거나, js를 정리해 압축할 수 있습니다. 가볍기 때문에 선택했습니다.

개발 환경 구축

Node.js 설치

gulp을 사용하려면 먼저 Node.js를 설치하십시오.
htps : // 그래서 js. 오 rg/엔/

프로젝트 만들기

다음과 같은 구성으로 만듭니다.

build/js

app.min.js -> 빌드 아티팩트

lib/js -> Jquery등의 3rdParty 두는 곳

src/js

app1.coffee -> 앱 코드 1

app2.coffee -> 앱 코드 2

package.json -> Node.js 설정 파일

gulpfile.coffee -> gulp 설정 파일

index.html -> 테스트 HTML 파일

gulp 용 라이브러리 설치

# 基本セット
npm install --save-dev gulp gulp-coffee
# 圧縮用
npm install --save-dev gulp-concat gulp-uglify gulp-sourcemaps
# エラー処理
npm install --save-dev gulp-plumber gulp-notify
# その他ユーティリティー
npm install --save-dev gulp-util run-sequence

gulp 빌드 스크립트 작성

gulpfile은 CoffeeScript로 작성됩니다. CoffeeScript의 기본 문법은 다음을 참조하십시오.
h tp // w w. 뾰족하고 r. 네 t/우ぇb/루병라이 ls4/0901

gulpfile.coffee

# ライブラリのロード
gulp    = require "gulp"
coffee  = require "gulp-coffee"
concat  = require "gulp-concat"
notify  = require "gulp-notify"
util    = require "gulp-util"
plumber = require "gulp-plumber"
sourcemaps   = require "gulp-sourcemaps"
uglify  = require "gulp-uglify"
runSequence = require "run-sequence"

# エラー時にGUIでポップアップ表示.
errorProcess = 
  errorHandler: notify.onError "Error: <%= error.message %>"

# CoffeeScriptをJSに変換し, src/jsに出力
gulp.task "coffee", ->
  gulp.src "src/js/*.coffee" #対象ファイル
    .pipe plumber errorProcess #エラー処理
    .pipe coffee() #coffeeをjsにコンパイル
    .on "error", util.log 
    .pipe gulp.dest "src/js/" #出力先

# ビルド物生成
gulp.task "js.build", ->
  gulp.src [ "lib/js/*.js", "src/js/*.js" ]
    .pipe plumber errorProcess
    .pipe sourcemaps.init() # sourcemaps作成
    .pipe concat "app.min.js" # ファイルを結合 
    .pipe uglify() #圧縮            
    .pipe sourcemaps.write "./"　#app.min.js.mapの書き出し
    .pipe gulp.dest "build/js/" #app.min.jsの書き出し

# CoffeeScriptのコンパイルからビルド物生成まで
gulp.task "build", -> runSequence "coffee", "js.build"

# CoffeeScriptファイルに変更があったら, jsを随時ビルド(結合圧縮まですると時間がかかるのでしない)
gulp.task "watch", ->
  gulp.watch "src/js/*.coffee", ["coffee"]

빌드 및 모니터링

gulp 태스크 실행을 위해 package.json에 다음 속성을 추가합니다.

package.json

{
# ...
  "scripts": {
    "build": "gulp build",
    "watch": "gulp watch"
  },
# ...
}

빌드 및 모니터링

#ビルド
npm run build
#監視
npm run watch

gulp을 global install하고 직접 gulp를 차는 방법도 있지만 환경에 의존하기 때문에 위와 같이 npm을 통해 실행하는 것이 좋습니다.