プリプロセッサー内蔵したウェブサーバー Harpを試してみた

HarpはMarkdown, Jade, EJS, LESS, Stylus, Sass, CoffeeScriptを内蔵したウェブサーバー。

プリプロセッサー内蔵しているので、CoffeeScriptなどをコンパイルすることなく公開できる。

Harpは、node.jsでのMiddlemanやJekyllのような静的なサイトのジェネレーターのような感じ。

簡単なセットアップ

npmでインストール

npm install -g harp

view raw install.sh hosted with ❤ by GitHub

initializeする

harp init sample-app

view raw initializing.sh hosted with ❤ by GitHub

次のようにファイルが生成される

	sample-app
	├── 404.jade
	├── _layout.jade
	├── index.jade
	└── main.less

view raw initializing-tree.txt hosted with ❤ by GitHub

サーバーを起動する

harp server sample-app --port 9000

view raw start.sh hosted with ❤ by GitHub

ファイルをコンパイルすることも可能

harp compile sample-app public

view raw compile.sh hosted with ❤ by GitHub

指定したディレクトリに出力される。(特に指定しないときはpublic)

	public
	├── 404.html
	├── index.html
	└── main.css

view raw compile-tree.txt hosted with ❤ by GitHub

ExpressのMiddlewareとして利用することも可能

package.jsonを作成し

	{
	"name": "harp-sample",
	"version": "0.0.1",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "BSD-2-Clause",
	"devDependencies": {
	"express": "~3.4.7",
	"harp": "~0.11.0"
	}
	}

view raw package.json hosted with ❤ by GitHub

サーバーを作成

	var express = require("express");
	var harp = require("harp");
	var app = express();
	app.configure(function(){
	app.use(express.static(__dirname + "/public"));
	app.use(harp.mount(__dirname + "/public"));
	});
	app.listen(9000);

view raw index.js hosted with ❤ by GitHub

起動する

node index.js

view raw middlewear.sh hosted with ❤ by GitHub

メタデータや変数などはjsonファイルから取得できる。

以下のようなアプリケーション構造の場合

	sample-app
	├── 404.jade
	├── _harp.json
	├── _layout.jade
	├── articles
	│   ├── _data.json
	│   └── hello-world.jade
	├── index.jade
	└── main.less

view raw harp_application_tree.txt hosted with ❤ by GitHub

_data.jsonに次のようにすることで

	{
	"hello-world": {
	"title": "Hello World.",
	"date": "2013-02-28"
	}
	}

view raw _data.json hosted with ❤ by GitHub

hello-world.jade テンプレートで

	article
	h1= title
	time= date

view raw hello-world.jade hosted with ❤ by GitHub

とすることでjsonの値を取得できる。
また、ファイルの接頭辞に_(アンダースコア)がある場合はファイルは公開されない。

_harp.jsonファイルにグローバル変数を定義することで使用できる。

	{
	"globals": {
	"name": "sample-app"
	}
	}

view raw _harp.json hosted with ❤ by GitHub

例えばindex.jadeを以下のようにすると グローバル変数nameを参照できる。

	h1 Welcome to Harp.
	h2= name
	h3 This is yours to own. Enjoy.

view raw index.jade hosted with ❤ by GitHub

HarpはHeroku, Github Pagesで公開できるほかにDropboxを使いHarp Platformで公開もできる。

Harpではそれほどコマンドがないので必要ないけど、Harp serverのGruntプラグインgrunt-harpもあった。
Gruntプラグインではサーバーの起動、コンパイルをサポートしている。

package.jsonに追記して、npmインストール。

	{
	"name": "harp-sample",
	"version": "0.0.1",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "BSD-2-Clause",
	"devDependencies": {
	"express": "~3.4.7",
	"harp": "~0.11.0",
	"grunt": "~0.4.2",
	"load-grunt-tasks": "~0.2.1",
	"grunt-harp": "~0.1.3"
	}
	}

view raw add-grunt-package.json hosted with ❤ by GitHub

Gruntfileは以下のようにした。

	# global module:false
	module.exports = (grunt) ->
	require('load-grunt-tasks')(grunt)
	# configurable paths
	harpAppConfig =
	sampleApp:
	source: 'sample-app'
	dist: 'public'
	# Project configuration.
	grunt.initConfig
	harpApp: harpAppConfig
	# Metadata.
	pkg: grunt.file.readJSON 'package.json'
	harp:
	server:
	server: true,
	source: '<%= harpApp.sampleApp.source %>'
	dist:
	source: '<%= harpApp.sampleApp.source %>',
	dest: '<%= harpApp.sampleApp.dist %>'
	# Default task.
	grunt.registerTask 'default', ['harp']

view raw Gruntfile.coffee hosted with ❤ by GitHub

ということで、ざっくり試してみた。

静的ファイルの生成はもちろん、html5アプリケーションなどの開発にも使用できそう。
プリプロセッサー内蔵ということでローカルの開発環境の構築が簡単なところも良さそう。

ruby + nginx ではなく、サーバーとクライアントともにjsでの開発だと選択肢としてありそう。