SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #3
さて本シリーズ第三回です。
前回は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のコードでできています。
説明を
これだけで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は以下の3つです。
YYYYmmddHHMMSS_SITE_NAMEフォルダに格納
- index.html
- foo/bar.html
- admin/index.html
もちろんlayoutファイルやパーツの部分もちゃんと一つのhtmlになって返ってきますし、css、jsもいけるので同じように記述してみてください。