WindowsでCoffeeScript+Sassのコンパイルをする

ちょろっと家でも「Vue.jsで遊びたいなー」と思ったものの、さすがにあの構造をjsでベタ書きするのは面倒だ！
しかし仕事で使い慣れたCoffeeScriptをコンパイルする環境なんて作ってないしなぁ。。。

というわけで、**まあ、作りましょうか・ｘ・**

Git操作はGitBashを使うので、そのままCoffeeのコンパイルも出来ると楽だよね！
ついでにSassも入れてしまおう。

# 環境構築その1　CoffeeScript編

まずはWindows環境のGitBashで、CoffeeScriptを自動コンパイル(変更感知)させることを目指す。

## Node.jsのインストール

Node.jsは公式からDLして、そのままの設定でインストール。バージョンは6.10.3。
https://nodejs.org/ja/

## CoffeeScriptのインストール（回り道）

`npm install -g coffee-script`
でインストール。下の書き方でも良い。
`npm i -g coffee-script`

### コンパイルテスト
フォルダ内にsample.coffeeを作成し、
```coffee -c sample.coffee```
を実行。同フォルダ内にsample.jsが作成される。
単にjsをcoffeeで書きたいだけならこれで事足りるわけだな！

## Gulpのインストール
とりあえず作業フォルダでGitBash開いて``npm init``コマンド打つと、
「止める時はCtrl+Cを押してね！」とメッセージ。
でも未入力でEnterを連打。
```Is this ok? (yes)```　Enterキー、ｯﾀｰﾝ！
とやると、package.jsonというファイルが作られる。
後でいじることになるので、放置してGulpを入れる。
```npm i -D gulp```
```npm i -g gulp``` ※gulpをグローバルでも入れておく
続けてCoffeeScriptを入れ直す。あとgulp-coffeeも入れる。
```npm i -D coffee-script```
```npm i -D gulp-coffee```
これでpackage.jsonに

```json:package.json
  "devDependencies": {
    "coffee-script": "^1.12.6",
    "gulp": "^3.9.1"
    "gulp-coffee": "^2.3.4"
  }
```

が追加されました。確認ついでにmainをいじります。

```json:package.json
  "main": "gulpfile.coffee",
```

## フォルダ構成

Gitフォルダ
　┣　package.json
　┣　gulpfile.coffee
　┣　jsフォルダ（.jsファイル置き場）
　┣　vendorフォルダ（他所からもってきた.js置き場）
　┗　coffeeフォルダ（.coffeeファイル置き場）

vendorのjsはそのままコピー、coffeeはコンパイルしてjsフォルダに配置したい。
で、coffeeファイルが更新されたら、自動でjsにコンパイルさせるわけさ！

## gulpfile.coffeeの作成

```coffee:gulpfile.coffee
gulp = require 'gulp'
coffee = require 'gulp-coffee'

gulp.task 'copy_vendor', ->
  gulp.src './vendor/*'
    .pipe gulp.dest './js/'

gulp.task 'compile_coffee', ->
  gulp.src './coffee/*.coffee'
    .pipe coffee()
    .pipe gulp.dest './js/'

gulp.task 'watch', () ->
  gulp.watch './coffee/*.coffee', ['compile_coffee']

gulp.task 'deploy', ['copy_vendor', 'compile_coffee']
gulp.task 'default', ['deploy', 'watch']
```

## 実行
適当なcoffeeファイル置いて、GitBash開いて、`gulp` ｯﾀｰﾝ！

```:gitbash
$ gulp
[HH:mm:ss] Requiring external module coffee-script/register
[HH:mm:ss] Using gulpfile X:\XXXXX\XXXXXX\gulpfile.coffee
[HH:mm:ss] Starting 'copy_vendor'...
[HH:mm:ss] Starting 'compile_coffee'...
[HH:mm:ss] Starting 'watch'...
[HH:mm:ss] Finished 'watch' after 11 ms
[HH:mm:ss] Finished 'copy_vendor' after 256 ms
[HH:mm:ss] Finished 'compile_coffee' after 613 ms
[HH:mm:ss] Starting 'deploy'...
[HH:mm:ss] Finished 'deploy' after 11 μs
[HH:mm:ss] Starting 'default'...
[HH:mm:ss] Finished 'default' after 4.83 μs
```
coffeeを更新すると、

```:gitbash
[HH:mm:ss] Starting 'compile_coffee'...
[HH:mm:ss] Finished 'compile_coffee' after 154 ms
```

といった感じに、再度コンパイルしてくれます。Ctrl+Cでwatchは止まります。
逆にwatchしないなら、`gulp deploy` と入力すれば1回コンパイルして終了です。

# 環境構築その2　Sass編
Vue.jsやるなら部品単位のstyleタグで指定するし不要かも、とは思うものの、
外枠のCSSはあった方が便利でしょう。というわけで一緒にSass（gulp-sass）も入れてしまいます。

## Sassのインストール
最初はgulp-ruby-sass使おうと思ってたけど、gulp-sassならRuby要らないって聞いて路線変更。
`npm i -D gulp-sass`
はい、これだけですね。node-sassもsass本体も不要っぽい。

## フォルダ構成

Gitフォルダ
　┣　package.json
　┣　gulpfile.coffee
　┣　cssフォルダ（使用する.css置き場）★追加★
　┣　jsフォルダ（使用する.js置き場）
　┣　vendorフォルダ（他所からもってきた.jsと.css置き場）★cssも追加★
　┣　scssフォルダ（.scss置き場）★追加★
　┗　coffeeフォルダ（.coffee置き場）

## gulpfile.coffeeの修正

vendorからのcopy対象と行先を変更してます。後はCoffeeと同様にSassの部分を書くだけ。

```coffee:gulpfile.coffee
gulp = require 'gulp'
coffee = require 'gulp-coffee'
sass = require 'gulp-sass'

gulp.task 'copy_vendor', ->
  gulp.src './vendor/*.css'
    .pipe gulp.dest './css/'
  gulp.src './vendor/*.js'
    .pipe gulp.dest './js/'

gulp.task 'compile_sass', ->
  gulp.src './scss/*.scss'
    .pipe sass()
    .pipe gulp.dest './css/'

gulp.task 'compile_coffee', ->
  gulp.src './coffee/*.coffee'
    .pipe coffee()
    .pipe gulp.dest './js/'

gulp.task 'watch', ->
  gulp.watch './scss/*.scss', ['compile_sass']
  gulp.watch './coffee/*.coffee', ['compile_coffee']

gulp.task 'compile', ['compile_sass', 'compile_coffee']
gulp.task 'deploy', ['copy_vendor', 'compile']
gulp.task 'default', ['deploy', 'watch']
```

## 実行
適当なscssファイル置いて、GitBash開いて、`gulp` ｯﾀｰﾝ！
（ログ省略）

無事にCoffeeとSassのコンパイル環境が整いました。これでVue.jsで遊べます。
文法エラーでwatch止まるけど、大体は変更途中のSaveだから、むしろ止まってくれていい。

# かかった時間

Qiita書きながらだったので6時間ほど。
ひとつひとつの作業は一瞬で終わるのに、なんと時間のかかることか。
この記事自体、どちらかと言えばMarkdownの練習の意味が大きかったので、まあ良しとしましょう。