Webアプリのモックアップ作業土台を作る その3 Sass Source Map
その1 と その2 Sprockets の続きです。が、今回の作業は その1 の途中からブランチしてます。
Google Chrome の Dev Tools は Sass/SCSS の Source Map に対応しているので利用できるようにしてみます。が、Source Map は仕様も実装も流動的な状態で、環境によって動作しない可能性も大ありなので、あくまで参考まで。
リポジトリ上では Sprockets も Bootstrap も Compass も導入する前の段階からブランチを生やしました。
新仕様と旧仕様
CSS リクエストへのレスポンスでブラウザに Source Map の位置(パス)を知らせる必要があり、その方法は2種類あります。
- レスポンスの HTTP ヘッダで渡す
- ボディ内のコメントで渡す
Webアプリのモックアップ作業土台を作る その2 Sprockets
前回のつづき。
前回作った作業台に Sprockets を導入して assets 提供を分離します。といっても Sprockets 使っていくかどうか自分でも確信持ててないのでリポジトリではブランチにしておきました。
Sprockets を導入するメリットとしては、このままデプロイするケースを視野に入れたときに圧縮機能を追加しやすかったりプリコンパイルできたりするところでしょうか(どちらも今回はやってません)。
というわけで、まずは Gemfile
に sprockets
関連の gem を追加して bundle
。
gem 'sprockets' gem 'sprockets-helpers' gem 'sprockets-sass'続きを読む
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 があればブラウザ拡張は必要ありません。