次に当てはまった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>
動作テスト
node app
どうだろう。いろいろ試したあとから書いたので、どこか抜けてるかも。
さて、…、長い。長いぞおおお(汗
分けるというか、眠いので寝ます。もうAM5時である。なんてこった。
0 件のコメント:
コメントを投稿