G2SS Diary: Express3.2.0でEJSやCoffeeScriptやStylus

もはや何も言うまい、タイトルの通りオールインワンである。
次に当てはまったExpress初心者カモン（何

Jadeに挫折、Jadeが嫌い、eRubyヤッホウ
CoffeeScriptバンザイ、Sprocketsバンザイ
CSSにプリコンパイラ無しは地獄、LESSやSASSバンザイ
Railsバンザイって思ったけど軽量に向かないな〜

まぁ明らかにRails(4)→node.jsと移ってきました、はい。ちなみにインストール系は省略！（ぉぃ

さぁ、いってみよー

準備済み前提環境

必須 Win/Mac/Linux系の環境を持つPC
必須 node.js 0.10.5 ぐらい？
必須 express 3.0以上（私は3.2.0）
推奨 nib用にcairoをインストール済み

nibのIE8対応等いらない人はcairoイラン。あと、私は Mac OS X 10.6 Snow Leopard を使ってるので、Lionやそれ以上の方向けの対応は一切出来ない。Windowsの方も同様。Linuxの方は…言うまでもないか。

それと、MacOSXでMacPorts使ってる人だとcairo入らないかも。自分でビルドするか、HomeBrewに移行でもしてください。

ウェブアプリケーション自動生成

Expressのコマンド自体を一度も入力してない人がいない前提で。

express -e -c stylus testapp

ちなみにSASSでもSCSSでもLESSでもなく、Stylus使ったのは、どうせならやったことないの使おうよっていうだけです。
※記述スタイルが自由奔放、記号少なめでクールというのに魅了されただけ

とりあえず「カレントディレクトリを移動」してね。
npmでライブラリインストールする前に「package.json」を加工。

...
  "dependencies": {
    "express": "3.2.0",
    "ejs": "*",
    "ejs-locals": "*",
    "connect-assets": "*",
    "coffee-script": "*",
    "stylus": "*",
    "nib": "*",
    "canvas" : "*"
  },
  "engines": {
    "node": "0.10.5",
    "npm": "1.2.18"
  }
...

前後省略してるので注意。cairo入れてない人はcanvasいらない。
nib自体いらないなら、nibもいらない。enginesの指定は、herokuというクラウドアプリケーションサービスにデプロイする為の記述なので、いらなければ消してOkay。
ここから多少躓く可能性がある。環境依存。（特にcanvasで…）

npm install

ERRとか出てなければ成功。出たらドンマイ。
MacOSX+HomeBrewで出たら、次のを試してみると良いかも。

brew link pixman cairo --force
export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig
npm install

app.jsの調整

初期設定で一番面倒な部分。追記部分がバラバラにあるので、とりあえず全部載せる。Express 3.2.0 の人は、基本的にはそのままでいいはず…。それ以外の人は参考程度に。

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , stylus = require('stylus')
  , nib = require('nib');

var app = express();

// ejs layout
app.engine('ejs', require('ejs-locals'));

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('template_engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('connect-assets')());
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

JSとCSSの準備

connect-assetsでRailsのSprocketsのようなことをしているので、ディレクトリ構成を多少いじる。次のコマンドで良いと思う。

mkdir assets
mv public/javascripts assets/js
mv public/stylesheets assets/css

「assets/js/application.coffee」を作っておく。内容は「#= require_directory .」とかでいいんじゃね（ぇ
同様に「assets/css/application.styl」を作ると良いけど、Sprockets経験者様にはもれなく注意事項が。CSSはrequire対応してないので、@importで対応するように。

ちなみにここでは「application」と、Sprocketsチックにしてるけど、私は「master」派（謎）なので、好きなように変えて問題ない。次の項目で使うから注意。

EJSのLayout化

「views/layout.ejs」を作る…が、「views/index.ejs」をベースにした方が楽かも。とりあえずこんな感じで良いんじゃないだろうか。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="start" href="/" title="G2SS SabaMotto">
    <%- css('application') + js('application') %>
  </head>
  <body>
      <%- body %>
  </body>
</html>

次に、「views/index.ejs」に上記を適用・パーシャル化する。自動生成のを再現するなら次の通り。

<% layout('layout') -%>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

動作テスト

ここまで来ると多分動作するはず。次のコマンドでサーバーを起動し、レッツ http://localhost:3000/ ！

node app

どうだろう。いろいろ試したあとから書いたので、どこか抜けてるかも。

さて、…、長い。長いぞおおお（汗
分けるというか、眠いので寝ます。もうAM5時である。なんてこった。

G2SS Diary

ページ

2013年5月4日土曜日

Express3.2.0でEJSやCoffeeScriptやStylus