ちょろっと家でも「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に
"devDependencies": {
"coffee-script": "^1.12.6",
"gulp": "^3.9.1"
"gulp-coffee": "^2.3.4"
}
が追加されました。確認ついでにmainをいじります。
"main": "gulpfile.coffee",
フォルダ構成
Gitフォルダ
┣ package.json
┣ gulpfile.coffee
┣ jsフォルダ（.jsファイル置き場）
┣ vendorフォルダ（他所からもってきた.js置き場）
┗ coffeeフォルダ（.coffeeファイル置き場）
vendorのjsはそのままコピー、coffeeはコンパイルしてjsフォルダに配置したい。
で、coffeeファイルが更新されたら、自動でjsにコンパイルさせるわけさ！
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 ｯﾀｰﾝ！
$ 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を更新すると、
[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の部分を書くだけ。
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の練習の意味が大きかったので、まあ良しとしましょう。