This Roda plugin provides support for integrating Sprockets with your Roda codebase.
This is a fork of roda-sprocket_assets. This release supports Roda 3.x and Sprockets 3.x and 4.x.
Add this line to your application's Gemfile:
gem 'roda-sprockets'
And then execute:
$ bundle
class App < Roda
plugin :sprockets, precompile: %w(site.js site.css),
opal: true,
plugin :public
route do |r|
r.public
r.sprockets if %w[development test].include? ENV['RACK_ENV']
end
end
precompile
- an array of files that you want to precompileprefix
(relative to theroot
, which isapp.opts[:root]
by default) - an array of directories where your assets are located, by default:%w(assets vendor/assets)
.- Here, an element of the array can be an absolute path instead of relative.
- If an element ends with
/
, it will use assets directly in a given subdirectory. - If it doesn't end with
/
(which is by default) if will be equivalent tovalue/*
, which means, that assets will be loaded for instance fromassets/javascripts
andassets/stylesheets
, but not directly fromassets
. - An element can contain glob characters.
root
- a filesystem root directory of your app. By default, same asapp.opts[:root]
, that is:Dir.pwd
.public_path
- filesystem path to a place, where precompiled assets will be stored, by default:public/assets
(it should be a directory from which:public
plugin takes files +path_prefix
)path_prefix
- a Roda prefix of your assets directory. By default:/assets
protocol
- either :http (default) or :https.css_compressor
,js_compressor
- pick a compressor of your choice (respected only ifdebug
is false)host
- for hosting your assets on a different serverdigest
(bool) - digest your assets for unique filenames, default: trueopal
(bool) - Opal support, default: falsedebug
(bool) - debug mode, default: true if RACK_ENV is development or test, false otherwise (in rake tasks it's false too)cache
- aSprockets::Cache
instance, default: nil (no cache)
In your layout.erb (take note of the stylesheet_tag and javascript_tag):
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Website</title>
<%= stylesheet_tag 'site' %>
</head>
<body>
<h1>Website</h1>
<%= yield %>
<%= javascript_tag 'site' %>
</body>
</html>
Opal is the first citizen of this plugin. Add opal
and opal-browser
gems, require 'opal'
, require 'opal-browser'
before this plugin gets
loaded. Create assets/js/site.rb
:
require 'opal'
require 'opal-browser'
$document.body << DOM {
div "Hello world!"
}
You will need to tell Opal to load this file. Add this in your template
after everything has been loaded (after your javascript_tag
call, it is
needed too!):
<%= opal_require 'site' %>
Note that it won't be needed for plain Javascript use, only Opal needs that line.
To speed up page loads during development, you can enable cache. Be warned, there are some caveats with how Sprockets cache works. This will improve your experience, but be prepared for some rough edges.
To enable memory cache, add an argument to your plugin config:
cache: Sprockets::Cache::MemoryStore.new(65536)
To enable filesystem cache, for it to persist across application restarts, add an argument to your plugin config:
cache: Sprockets::Cache::FileStore.new("var/cache/")
Remember: with filesystem cache problems may happen if you, for instance, update your Gems. You will then have to remove the cache for it to get repopulated.
In your Rakefile:
require_relative 'app'
require 'roda/plugins/sprockets_task'
Roda::RodaPlugins::Sprockets::Task.define!(App)
And launch: rake assets:precompile
or rake assets:clean
You can configure your environment directly by accessing a method sprockets_env
(which is a Sprockets::Environment
) on your App
class.
For instance, to enable Brotli with sprockets-exporters_pack
you will need to either add this code inside your App
class:
sprockets_env.register_exporter %w(text/css application/javascript image/svg+xml), Sprockets::ExportersPack::BrotliExporter
Or at some other point:
App.sprockets_env.register_exporter %w(text/css application/javascript image/svg+xml), Sprockets::ExportersPack::BrotliExporter
Do note, that some extensions, like for example opal-optimizer
won't need any configuration at all beside require "opal/optimizer/sprockets"
.
- Fork it ( https://github.com/hmdne/roda-sprockets/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request