AB Lab

abgata20000 blog.

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

npmでグローバルにインストール

1

npm install -g express

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

1

express myApp

img

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

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

1

npm install -g express-generator

再チャレンジしてみる

1

express myApp

img

できた。

expressを起動してみる

まずは設定

1
2
3

cd myApp
npm install
node app

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

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

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

1

npm start

img

できた。

CSSをLESSで書きたい

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

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

less.js-middleware

を設定してみた。

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

1

npm install less-middleware --save

次に設定ファイルを変更

app.js
1
2
3
4
5
6

// use css engine less
var lessMiddleware = require('less-middleware');

app.use(lessMiddleware(
  path.join(__dirname, 'public')
));
public/stylesheets/style.less
1
2
3
4
5
6
7
8
9
10

h1{
  color: green;
}
#main
{
  color:#FFF;
  #sub{
    color:#666;
  }
}

アクセスしてみる

img

できた。

が、

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

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

app.js
1
2
3
4
5
6
7
8
9

// 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で開発できるようにする

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

1

npm install -g coffee-script js2coffee

jsファイルをcoffeescriptに変換

1

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

ここで大量のエラーが。

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

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

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

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

1
2

express myApp
cd myApp

で npm install をする前に

1

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

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

jsファイルを削除

1

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

ここで

1
2

npm install
npm install coffee-script --save

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

bin/www の先頭に以下を追記
1

require('coffee-script/register');

実行してみる

1

npm start

img

できた

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

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

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

coffee-middleware がよさそうなのでインストールしてみる

1

npm install coffee-middleware --save

設定ファイルを編集

app.coffee
1
2
3
4
5
6
7
8

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

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

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

public/main.coffee
1

alert 'main coffee'

実行してみる

img

できた。

とりあえず、

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

実際の運用を考えたら、

html はともかく

js や css は、

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

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

Comments