HarpってWebサーバーがイケてそうなのでとりあえず試してみました。 YouTubeで紹介された奴を割とそのまま試しただけなので何もすごくないですが。

少し確認してみたのですが、インストールも１コマンドで出来て手軽だし、Markdown,LESSとかTwitterBootstrap使ってるWebエンジニアにとってはかなり有用なのではないかと思いました。

以下参考サイトです。

Harp公式サイト Harp

Harpの紹介サイト（多分作者の人？） Introducing Harp

Harpの紹介YouTube Introduction to Harp Web Server

1.Harpって?

Webサーバーですよ
インストールはNodeのnpm使うよー
Markdown,EJS,CoffeeScript,LESS,Stylusとか解釈してくれますよー
コンパイルしてPureなHTMLとかCSS生成できるよー

他にも色々あるのかもしれませんが、とりあえず自分が試してみたのは上記機能のみです。

2.インストールしてみる

npm使うのでNodeを予めインストールしておく必要があります。どのバージョンが必要であるかという明記はなかったような気がしましたが、とりあえず自分はv0.10.11とかでとりあえず動きました。

以下のコマンドでOKです。

$sudo npm install harp -g

終わり!!!

3.とりあえず試す

公式に従ってharpコマンドを使ってテンプレートプロジェクト作ってみます。

$harp init myproject

とするとカレントディレクトリにmyprojectってフォルダが出来て、中に色々ファイルが出来てます。

-rwxr-xr-x  1 toshihirock  staff   52 Oct  6 08:08 404.jade
-rwxr-xr-x  1 toshihirock  staff   81 Oct  6 08:08 _layout.jade
-rwxr-xr-x  1 toshihirock  staff   52 Oct  6 08:08 index.jade
-rwxr-xr-x  1 toshihirock  staff  259 Oct  6 08:08 main.less

まあ、とりあえずWebサーバー起動して見てみると。

$harp server myproject

          _____                    _____                    _____                    _____          
         /l    l                  /l    l                  /l    l                  /l    l         
        /::l____l                /::l    l                /::l    l                /::l    l        
       /:::/    /               /::::l    l              /::::l    l              /::::l    l       
      /:::/    /               /::::::l    l            /::::::l    l            /::::::l    l      
     /:::/    /               /:::/l:::l    l          /:::/l:::l    l          /:::/l:::l    l     
    /:::/____/               /:::/__l:::l    l        /:::/__l:::l    l        /:::/__l:::l    l    
   /::::l    l              /::::l   l:::l    l      /::::l   l:::l    l      /::::l   l:::l    l   
  /::::::l    l   _____    /::::::l   l:::l    l    /::::::l   l:::l    l    /::::::l   l:::l    l  
 /:::/l:::l    l /l    l  /:::/l:::l   l:::l    l  /:::/l:::l   l:::l____l  /:::/l:::l   l:::l____l 
/:::/  l:::l    /::l____l/:::/  l:::l   l:::l____l/:::/  l:::l   l:::|    |/:::/  l:::l   l:::|    |
l::/    l:::l  /:::/    /l::/    l:::l  /:::/    /l::/   |::::l  /:::|____|l::/    l:::l  /:::|____|
 l/____/ l:::l/:::/    /  l/____/ l:::l/:::/    /  l/____|:::::l/:::/    /  l/_____/l:::l/:::/    / 
          l::::::/    /            l::::::/    /         |:::::::::/    /            l::::::/    /  
           l::::/    /              l::::/    /          |::|l::::/    /              l::::/    /   
           /:::/    /               /:::/    /           |::| l::/____/                l::/____/    
          /:::/    /               /:::/    /            |::|  ~|                       ~~          
         /:::/    /               /:::/    /             |::|   |                                   
        /:::/    /               /:::/    /              l::|   |       Harp v0.9.3                 
        l::/    /                l::/    /                l:|   |       Asset Pipeline Framework    
         l/____/                  l/____/                  l|___|       By Chloi Inc. 2012-2013     

Your server is listening at http://localhost:9000...

デフォルトだと9000ポートでWebサーバーが起動するみたいなのでhttp://localhost:9000早速アクセス。

すごい、簡単だー。

4.Markdown見てみる

今度はテンプレート使わずやってみましょう。

$mkdir markdowntest
$cd markdowntest
$vi index.md

#Hello World
##Hello World2
    
+ test
+ test

$harp server --port 9000

これで同じくアクセス。

すばらしい。

5.BootstrapのLESSをコンパイルしてみる

YouTuebの紹介でもBootstrapのLESS使ってコンパイルしてーみたいな事をやっていたので、全く同じ方法でやります。

とりあえずTwitter Bootstrapをダウンロードしてくる。

Bootstrap

で解凍。

あと今回用にサンプルプロジェクト作って解凍したBootstrapからLESSを持ってきます。あと名前も変えます。

$mkdir bootstraptest
$cd bootstraptest
$cp -r ~/Downloads/bootstrap-3.0.0/less ./_bootstrap

TwitterBootstrapのLESSを読み込む用のlessを作成します。

$vi main.less

@import "_bootstrap/bootstrap";
body {
  background: @brand-primary;
}

１行目でBootstrapのすべてのLESSをインポートしているbootstrap.lessを読み込んでいます。 3行目ではBootstrapで定義してる変数を利用して背景色を指定しています。

テスト用のHTML作ってみます。

$vi index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

見てみます。

おー、しっかり背景色が変わっています。

さて、compileコマンドを使ってコンパイルします。

$harp compile --output ../www

終わるとwwwディレクトリが出来ています。

$ll ../www/
-rw-r--r--  1 toshihirock  staff     224 Oct  6 08:55 index.html
-rw-r--r--  1 toshihirock  staff  100869 Oct  6 08:55 main.css

綺麗にコンパイルされてます。あら、素敵！

6.最後に

個人的にですが、Gruntとか使ってみたいけど敷居高そうだなーと考えている人には良いのでは？という感じでした。

上記ぐらいの利用法であれば特に詰まる事なくできたので、そいう手軽さもすごい良いなと。

タイトルとか決めてないけどこのままでもいいかもしんない

2013年10月6日日曜日

"Harp"ってフロントエンドエンジニアに良さげなWebサーバーを試してみた

目次