Webアプリのモックアップ作業土台を作る その1
Slim, Sass/SCSS, CoffeeScript が使えて Livereload してくれるフロント周辺の作業環境がほしいと思いながらも自分にしっくりくる構成ができなかったんですが、最近 rack-livereload を見つけてピースが埋まった感じがしたのでまとめます。
記事を書くにあたり naoya さんのひな型に大いに影響されてますが、ここでは npm でインストールするのは bower だけにして基本的には Sinatra と Guard に任せています。
Sinatra, Slim, Sass, CoffeeScript
土台の土台としてシンプルな Sinatra アプリから。Gemfile
を書いて bundle
。
Gemfile
source 'https://rubygems.org' gem 'sinatra' gem 'sinatra-contrib' gem 'sass' gem 'slim' gem 'coffee-script' group :develoopment do gem 'shotgun' gem 'thin' end
workbench.rb
require 'sinatra/base' require 'sinatra/reloader' require 'slim' require 'sass' require 'coffee-script' class Workbench < Sinatra::Base configure :development do register Sinatra::Reloader end get '/' do @title = 'Index' slim :index end get '/css/application.css' do sass :application end get '/js/application.js' do coffee :application end end
views/layout.slim
doctype html html head title= @title + ' | Site Workbench' link href="/css/application.css" rel="stylesheet" body == yield script src="/js/application.js"
views/index.slim
h1 Workbench p Workbench for my site.
views/application.sass
body background: hsl(0, 0%, 90%)
views/application.coffee
() -> 'Hoge'
config.ru
require 'bundler' Bundler.setup require File.expand_path(File.join('..','workbench'), __FILE__) run Workbench
これで bundle exec shotgun --server=thin --port=3000
するとサーバーが立って、とりあえずプレビューできます。コマンド名が気持ちいい shotgun。
Guard, guard-livereload, rack-livereload
Livereload 環境にするため guard
, guard-livereload
, rack-livereload
を導入。rack-livereload があればブラウザ拡張は必要ありません。