SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #3

SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する

#Sinatra

#Ruby

#SASS

#SCSS

#CoffeeScript

山形孝造

2013.02.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

さて本シリーズ第三回です。
前回はhaml、scss、coffeescriptのコンパイルを正規表現で省略したり、hamlのレイアウトを変更する方法を紹介させて頂きました。
今回はコンパイル済みのhtml、css、javascriptをまとめて保存するスクリプトを紹介してみようと思います。

rakeをインストールする

rubyでは自動化したいタスクがある場合、rakeというビルドツールを使用します。インストールはGemfileに記述を追加してbundleコマンドを叩くだけです。

Gemfile

gem 'rake' # 追加

$ bundle # installは省略できます

rakeがインストールできたら試しにHello Worldでもしてみましょう。
プロジェクトのルートディレクトリに Rakefile という名前のファイルを作成し以下のように記述してください。

Rakefile

desc 'This is my first rake task'
task :hello do
  p 'Hello World'
end

Rakefileの用意ができたら同じプロジェクトのディレクトリで以下のコマンドを叩くと、作成したtaskの一覧が見られるようになります。

$ bundle exec rake -T
rake hello  # This is my first rake task

既にお分かりかもしれませんが、Rakefileの記述は全てrubyのコードでできています。
説明をdesc メソッドに渡し、taskメソッドに名称と処理内容をブロックで渡しています。
これだけでtaskが定義できます簡単ですね。

Haml、Scss、CoffeeScriptのコンパイル結果を受け取る方法

それではコンパイル結果を受け取る方法を紹介したいと思います。
ファイル取得のために毎回サーバを立てると時間がかかり過ぎてしまうので、Sinatraアプリに擬似的にリクエストを投げて実際と同じように動作させるために、 rack-test というgemを使用したいと思います。

Gemfileに追加してインストール出来ます。

Gemfile

gem 'rack-test'

$ bundle
Fetching gem metadata from http://rubygems.org/..
... 省略 ...

インストール出来たらRakefileに記述して動作を確認してみます。

Rakefile

# gemを全て読み込み
require 'bundler'
Bundler.require

# Appクラスを読み込み
require './app'

task :test do
  # モックのセッションオブジェクトを作成
  mock_session = Rack::MockSession.new(App)
  
  # rack-testのセッションでラップ
  app = Rack::Test::Session.new(mock_session)
  
  # トップページを取得してhtmlを出力してみる
  p app.get('/index.html').body
end

rakeコマンドを叩いてみます

$ bundle exec rake test
"<!DOCTYPE html>\n<html>\n  <head>\n    <title>Sample App</title>\n    <link href='/stylesheets/main.css' rel='stylesheet' type='text/css' />\n  </head>\n  <body>\n    <h1>hello</h1>\n    <div>this is shared haml.</div>\n  </body>\n</html>\n"

ちゃんと返ってきてます！あとは取得したいファイル一覧を用意して階層構造も維持したまま良い感じにフォルダにまとめておけると、便利だし速いし最高じゃないですか。

というわけで静的ファイルをまとめて保存できるクラスを作って、プロジェクトをGithubに公開しました

Github | yamagata-kozo/modern-web-creating-environment

json形式でサイトの階層を表現しておけば、あとはコマンド一発でタイムスタンプ付きのフォルダに格納します。

site.json

{
  "name": "SITE_NAME",
  "tree": [
    "index.html",
    {
      "foo": [
        "bar.html"
      ]
    },
    {
      "admin": [
        "index.html"
      ]
    }
  ]
}

上記のjsonで取得できるhtmlは以下の３つです。
YYYYmmddHHMMSS_SITE_NAMEフォルダに格納