Harp は Jade や CoffeeScript などのプリプロセッサを内蔵した Webサーバー です。何も設定することなくいきなり使い始められるのが特徴です。
Jade や CoffeeScript を自分でコンパイルしたり Grunt などのタスクランナーを走らせることなく公開することができます。
開発は OSS で進められておりこの記事を書いている時点でのバージョンは0.9.3です。
Hello World
Harp は npm で配布されているので npm が入っていない人は先にそちらの設定をお願いします。 node.js
|
1 |
npm install -g harp |
Harp は非常に単純なので init する必要すら感じませんが一応基本のファイル構成を見ておくのもいいと思います。
|
1 |
harp init myProject |
これで以下のようなファイルが作成されます。
これだけです。 “.“ から始まる隠しファイルなどは作成されていません。
init ができたらサーバーを立ち上げてみましょう
|
1 2 |
cd myProject harp server |
以下の様な画面が出ると思います
これでサーバーの立ち上げは終了です。
ブラウザを開いてhttp://localhost:9000にアクセスしてみてください。以下の様な画面が出ていれば成功です。
コンパイル
Harp はファイルをコンパイルして HTML, CSS, JavaScript に出力することも可能です。
プロジェクトフォルダの直下で
|
1 |
harp compile |
とするとwww/というフォルダが作られて中に公開用のファイルが作成されているのがわかります。
対応している形式
- Jade
- EJS
- Markdown
- Stylus
- LESS
- Coffee Script
これらのファイルを置いておけば勝手に HTML, CSS, JavaScript にコンパイルしてくれます。
簡単に言うと例えばさっきのmyProjectの中身は
であるかのようにブラウザからは見えます。
特別なファイル
_から始まるファイル
_から始まるファイルは公開されません。JadeやLESSなどでインポートする用のファイルなどに使えます
_layout.jade
標準のレイアウトを設定するファイルです。例えばharp initで作成される_layout.jadeの中身は
|
1 2 3 4 5 6 |
!!! html head link(rel="stylesheet", href="/main.css") body != yield |
となっていて、このyieldのところにindex.jadeの中身が入ります。
_lauout.ejsも使えます。
harp.json
harp.jsonにJSONデータを記述することで全てのファイルから参照可能なグローバルなデータを扱うことが可能です。例えば
|
1 2 3 4 5 6 7 |
{ "globals": { "title": "Acme Site", "name": "John Doe", "uri": "http://example.com" } } |
とするとJadeファイルからは
|
1 |
p= title |
として参照することができます。
(※現在この機能はpublic/フォルダを作成する形でないと正常に機能しないようです)
_data.json
様々な設定を書くことができるファイルです。レイアウトを適用するかどうかや各ファイルに渡すデータなどを記述することができます。
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "index": { "layout": false, "title": "Hello World.", "date": "Feb 28, 2013" }, "about": { "title": "Hello Brazil.", "date": "March 4, 201" } } |
Express と連携
Harp をライブラリとして使うことで Express と連携することもできます。
|
1 2 3 4 5 6 7 8 9 10 |
var express = require("express"); var harp = require("harp"); var app = express(); app.configure(function(){ app.use(express.static(__dirname + "/public")); app.use(harp.pipeline(__dirname + "/public")); }); // routes as normal. |
などとしてpublic/以下に直接Jadeなどを置いておけば後は Harp が適当に処理してくれます。
Heroku で公開
Harp は Webサーバー ですのでファイルを直接公開することが可能です。またコンパイルして静的なページとしてnginxなどを用いて公開することも可能です。公式サイトではGitHub Pages で公開する方法も紹介されています。Deploying to GitHub Pages
また Harp Platform を使えば DropBox 経由で公開することも可能だそうです
harp.io
さらに Harp は node.js 上で動作するので Heroku に公開することも可能です。
Heroku で公開するには
- package.json
- server.js
- Procfile
という3つのファイルを追加します。
それぞれ中身は
package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "name": "My Harp App", "version": "1.0.0";, "description": "A Harp App on Heroku", "dependencies": { "harp": "0.9.x"; }, "engines": { "node": "0.10.x", "npm": "1.2.x" } } |
server.js
|
1 |
require('harp').server(__dirname, { port: process.env.PORT || 5000 }) |
Procfile
|
1 |
web: node server.js |
というふうにすると良いでしょう。
参考
ひろせ
