Expressを使ってみる（Jade、LESS、CoffeeScript）

##npmでグローバルにインストール
```
npm install -g express
```


##express コマンドを実行してみる

```
express myApp
```

![img](https://abgata.s3-ap-northeast-1.amazonaws.com/957b8eafae631c6b5dbea76723b6526e.png)

そんなものはないと怒られる。

少し調べてみた結果、express コマンドには __express-generator__ が必要らしい

```
npm install -g express-generator
```

再チャレンジしてみる

```
express myApp
```
![img](https://abgata.s3-ap-northeast-1.amazonaws.com/58413184a08641c9fbfbceb588d6978e.png)

できた。


##expressを起動してみる

まずは設定

```
cd myApp
npm install
node app
```

あれ、何も起きない。。。


起動ファイルが、 app.js ではなく、 bin/www らしい

package.json の start コマンドに設定されていた。

```
npm start
```


![img](https://abgata.s3-ap-northeast-1.amazonaws.com/2a50a3c8a93be254d87363329362f689.png)

できた。


##CSSをLESSで書きたい

html の テンプレートエンジンはデフォルトで jade だったので、

このまま使うとして CSS は LESS を使いたいと言うことで、

[less.js-middleware](https://github.com/emberfeather/less.js-middleware)

を設定してみた。


まずは、npmでインストール

```
npm install less-middleware --save
```

次に設定ファイルを変更



#####app.js
```
// use css engine less
var lessMiddleware = require('less-middleware');

app.use(lessMiddleware(
  path.join(__dirname, 'public')
));

```

#####public/stylesheets/style.less
```
h1{
  color: green;
}
#main
{
  color:#FFF;
  #sub{
    color:#666;
  }
}
```


アクセスしてみる

![img](https://abgata.s3-ap-northeast-1.amazonaws.com/e807c53a7d054e9d138fbc66bff761c3.png)


できた。



__が__、

これだと、public/stylesheets にlessファイル置かないといけないので

lessファイルの配置場所を変更


#####app.js
```
// use css engine less
var lessMiddleware = require('less-middleware');

app.use(lessMiddleware(
  path.join(__dirname, 'assets'),
  {
    dest: path.join(__dirname, 'public')
  }
));
```
これで asets/stylesheets にless ファイルを配置すればOK



##CoffeeScriptで記述できるようにしたい

参考 [express.js 4をCoffeeScriptで開発できるようにする](http://qiita.com/koki_cheese/items/4cbacecf293f5c869be2)



coffee-script と js2coffee をインストールする

```
npm install -g coffee-script js2coffee
```

jsファイルをcoffeescriptに変換

```
find . -type f -name "*.js" | while read f; do js2coffee "$f" > "${f%.*}.coffee"; done
```

ここで大量のエラーが。


__node_modules__の中身にまで変換かけているっぽいですね。


スクリプト修正しようかと思ったが、

既にわけがわからなくなっているので、

復習も兼ねて、最初から作り直すことに


```
express myApp
cd myApp
```

で `npm install` をする前に


```
find . -type f -name "*.js" | while read f; do js2coffee "$f" > "${f%.*}.coffee"; done
```

今度は大丈夫みたいです。

jsファイルを削除


```
find . -type f -name "*.js" | xargs rm -f
```

ここで

```
npm install
npm install coffee-script --save
```


スタートアップファイルを編集

#####bin/www の先頭に以下を追記
```
require('coffee-script/register');
```


実行してみる

```
npm start
```

![img](https://abgata.s3-ap-northeast-1.amazonaws.com/2f7005395707093b773b7be923e285f0.png)


できた


## 外部ファイルもCoffeeScriptで書きたい

あとは、 public/javascripts のファイルもCoffeeScriptで書けるようになれば、

やりたいことは叶いますね。

[coffee-middleware](https://www.npmjs.org/package/coffee-middleware) がよさそうなのでインストールしてみる

```
npm install coffee-middleware --save
```


設定ファイルを編集

#####app.coffee

```
# use coffeescript
coffeeMiddleware = require('coffee-middleware')

app.use coffeeMiddleware(
  src: path.join(__dirname, "public")
  compress: true
  bare: true
)
```

CoffeeScriptのファイルを配置してみる

#####public/main.coffee
```
alert 'main coffee'
```



実行してみる


![img](https://abgata.s3-ap-northeast-1.amazonaws.com/9e17666badefe5abe6146f4ed979967f.png)


できた。

とりあえず、

やりたいことは、出来るようになったので満足なのですが、

実際の運用を考えたら、

html はともかく

js や css は、

毎回expressで生成するのもどうかというわけで、

多分 __grunt__ を使うことになるだろうなと思いました。