Gulp / CoffeeScriptの導入
作業環境の見直しで、タスクランナーを導入と、AltJSで代表的なCoffeeScriptを検討。
gulpを選択した理由
代表的なGruntではなくGulpを選択したのは、比較記事を参考に後者のほうがシンプルだったため。わかりやすさ、管理しやすさが理由。
CoffeeScriptを選んだ理由
わかりやすさで言えばTypeScript。マイクロソフト製ということで信頼度も高い。が、CoffeeScriptにしたのは書き殴りしやすさという一点。基本一人で作業が完結してしまう小規模な物が多い。 TypeScriptはあとからでも学習しやすそうだが、コード量はあまり変わらない、むしろ増える？、CoffeeScriptについてはRubyの知識がないので書き方を覚えるところから。覚えるなら今しかないってことも決め手の一つ。
Yeomanで一気に環境構築の前に、まずはこれらの使い方とかわかってないと何やってるのかわからんよねということで、Gulp - CoffeeScriptの環境構築をしようとしたところ見事にハマった…と言うよりド素人がgulpの記述もいきなりCoffeeScriptにしようとしたのが問題だった。 ということでメモを残す。
インストール
まずは導入するところから。Node.jsは必須。
まずは グローバルにgulpをインストールします。
$ npm install -g gulp $ gulp -v [gulp] CLI version 3.8.7 [gulp] Local version 0.0.0
この段階ではローカルにはgulpが入っていません。 そこでローカルにもインストールします。 npm は Node Package Managerの略。
プロジェクトのセットアップ
この手順の前にプロジェクトフォルダの生成・移動をします。
$ mkdir myproject $ cd myproject $ npm install --save-dev [email protected] $ gulp -v [gulp] CLI version 3.8.7 [gulp] Local version 3.8.7
@3.8.7はバージョンを指定します。なしで入力すると最新版がインストールされます。
package.jsonの生成
$ npm init
package.jsonはnode.jsのお作法で、パッケージとバージョン管理を記述したメタデータです。 このコマンドを打つと対話式にpackage.jsonを生成できます。 特に指定がない限りはエンター連打してれば完了。
CoffeeScriptプラグインのインストール（いらないっぽい）
$ npm install --save-dev gulp-coffee
これを実行すると、package.jsonにプラグインの情報の記述が追加され、必要なファイルがインストールされます。 一旦よく使う機能をまとめたpackage.jsonを作ってしまえば、新規プロジェクトのフォルダにコピーをして下記コマンドを実行するだけで、動作に必要な環境を生成してくれるようになります。
$ npm install
後で調べたところ、gulp 3.7でCoffeeScriptをネイティブサポートしたみたいですね。removeしても動作してました。
--save-devとか--saveがわからなかったので調べたことについては別で記述します。
gulpfile.jsの記述
require('./gulpfile.coffee')
gulp.jsには本来、実行するタスクを記述していくが、ここもCoffeeScriptで管理したいので、後述する本体との依存関係を記述。
gulpfile.coffeeの記述
gulp = require 'gulp' gulp.task 'default', -> console.log 'Hellow world!'
とする。
$ gulp [13:56:17] Using gulpfile ~/Develop/test/test-coffee/gulpfile.js [13:56:17] Starting 'default'... hello world! [13:56:17] Finished 'default'
defaultのタスクに指定した[hello world!]が出力されました。 タスクを登録していきます。