Express Coffee Templateは、ExpressJSのCoffeeSciprt版です。
$ git clone http://github.com/twilson63/express-coffee.git express_coffee_sampleCloning into express_coffee_sample $ cd express_coffee_sample/ $ npm install
本家よりも多くのパッケージがインストールされます。早速起動してみます。
$ node server.js Listening...
ブラウザで http://localhost:3000/ にアクセスします。
本家と見た目がずいぶん異なります。
本家ExpressJSと何が違うのか？
- スタイルシートにStylusを使っている
- スタイルシートのデフォルトテンプレートにResponsive Gridを使っている
- connect-assetsを使っている
加えて、エントリポイントのserver.js以外、CoffeeScriptで書かれている点が違います。
$ tree .
.
├── app.coffee
├── assets
│ ├── css
│ │ └── app.styl
│ └── js
│ └── app.coffee
├── node_modules/
├── package.json
├── public
│ └── favicon.ico
├── server.js
└── views
├── index.jade
└── layout.jade
assetsとresponsive gredを使っていることで、views/index.jadeが大きく変わっています。
以下はその一部
.container
.four.columns
div.
<a href="http://www.flickr.com/photos/astrapica/2560897976/" title="Uk express... by astrapi, on Flickr"><img src="http://farm4.staticflickr.com/3049/2560897976_48257593b7.jpg" width="100%" height="120px" alt="Uk express..."></a>
a.button(href="https://github.com/twilson63/express-coffee/zipball/v1.2.1") Download
a.button(href="https://github.com/twilson63/express-coffee") Source
:markdown
### About
This template was built to make it very easy to get up and going on small little prototypes and weekend projects.
### Contact Us
Have questions, or would like to contribute?
* [Post an Issue](https://github.com/twilson63/express-coffee/issues)
* [Submit a pull request](https://github.com/twilson63/express-coffee)
* Follow Us on twitter! [@jackhq](http://twitter.com/jackhq)
これは画面で言えば以下の部分になります。
markdownを上手く使ってResponsive Gridと組み合わせています。
ヘッダの部分を見てみます。views/layout.jadeです。
!!! 5
//if lt IE 7 ]><html class="ie ie6" lang="en">
//if IE 7 ]><html class="ie ie7" lang="en">
//if IE 8 ]><html class="ie ie8" lang="en">
// [if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]
head
meta(charset='utf-8')
title Express CoffeeScript Template
meta(name='description', content='')
meta(name='author', content='')
// Mobile Specific
meta(name="viewport", content="width=device-width, initial-scale=1.0")
// CSS
!= css("http://wilbur.io.s3.amazonaws.com/all.css")
!= css('app')
body
!= body
!= js('http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js')
!= js('app')
| </html>
「!= css」「!= js」がAssetsの機能です。シンプルになっているのが分かります。
で、本命の app.coffee を見てみます。
express = require 'express' stylus = require 'stylus' assets = require 'connect-assets' app = express.createServer() app.use assets() app.set 'view engine', 'jade' app.get '/', (req, resp) -> resp.render 'index' app.listen process.env.VMC_APP_PORT or 3000, -> console.log 'Listening...'
本家ExpressJSと比較して、設定がほとんど省略されています。必要に応じて追加して行きましょう。
ExpressJSをやっていて、そろそろCoffeeScriptでもやってみようかな、と思っている方にはちょうどいいパッケージ。
0 件のコメント:
コメントを投稿