gist

2012年4月26日木曜日

これからCoffeeScriptでNode.jsする人にオススメのパッケージ「Express Coffee Template 1.2」

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
    &nbsp;
    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 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)