Skip to content

Move config to yaml #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 3, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .rubocop_todo.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# This configuration was generated by
# `rubocop --auto-gen-config`
# on 2015-09-19 12:37:55 -0500 using RuboCop version 0.34.1.
# on 2015-10-03 13:56:01 -0500 using RuboCop version 0.34.1.
# The point is for the user to remove these configuration records
# one by one as the offenses are removed from the code base.
# Note that changes in the inspected code, or installation of new
Expand All @@ -9,4 +9,4 @@
# Offense count: 2
# Configuration parameters: AllowURI, URISchemes.
Metrics/LineLength:
Max: 91
Max: 86
20 changes: 11 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ This gem uses [PhantomJS](https://github.com/colszowka/phantomjs-gem) and [Penth
Add `critical-path-css-rails` to your Gemfile:

```
gem 'critical-path-css-rails', '~> 0.1.0'
gem 'critical-path-css-rails', '~> 0.2.0'
```

Download and install by running:
Expand All @@ -23,24 +23,26 @@ Download and install by running:
bundle install
```

Create the rake task that will generate your critical CSS
Run the generator to install the rake task and configuration file:

```
rails generator critical_path_css:install
```

This adds the following file:
The generator adds the following files:

* `config/critical_path_css.yml`
* `lib/tasks/critical_path_css.rake`


## Usage

First, you'll need to configue a few variables in the rake task: `lib/tasks/critical_path_css.rake`
First, you'll need to configue a few things in the YAML file: `config/critical_path_css.yml`

* `@base_url`: Change the url's here to match your Production and Development base URL, respectively.
* `@routes`: List the routes that you would like to generate the critical CSS for. (i.e. /resources, /resources/show/1, etc.)
* `@main_css_path`: Inside of the generate task, you'll need to define the path to the application's main CSS. The gem assumes your CSS lives in `RAILS_ROOT/public`. If your main CSS file is in `RAILS_ROOT/public/assets/main.css`, you would set the variable to `/assets/main.css`.
* `manifest_name`: If you're using the asset pipeline, add the manifest name.
* `css_path`: If you're not using the asset pipeline, you'll need to define the path to the application's main CSS. The gem assumes your CSS lives in `RAILS_ROOT/public`. If your main CSS file is in `RAILS_ROOT/public/assets/main.css`, you would set the variable to `/assets/main.css`.
* `routes`: List the routes that you would like to generate the critical CSS for. (i.e. /resources, /resources/show/1, etc.)
* `base_url`: Add your application's URL for the necessary environments.


Before generating the CSS, ensure that your application is running (viewable from a browser) and the main CSS file exists. Then in a separate tab, run the rake task to generate the critical CSS.
Expand All @@ -57,15 +59,15 @@ rake critical_path_css:generate

To load the generated critical CSS into your layout, in the head tag, insert:

```html
```HTML+ERB
<style>
<%= CriticalPathCss.fetch(request.path) %>
</style>
```

A simple example using loadcss-rails looks like:

```html
```HTML+ERB
<style>
<%= CriticalPathCss.fetch(request.path) %>
</style>
Expand Down
19 changes: 19 additions & 0 deletions lib/config/critical_path_css.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
defaults: &defaults
# If using the asset pipeline, provide the manifest name
manifest_name: application
# Else provide the relative path of your CSS file from the /public directory
# css_path: /path/to/css/from/public/main.css
routes:
- /

development:
<<: *defaults
base_url: http://localhost:3000

staging:
<<: *defaults
base_url: http://staging.example.com

production:
<<: *defaults
base_url: http://example.com
38 changes: 38 additions & 0 deletions lib/critical_path_css/configuration.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
module CriticalPathCss
class Configuration
CONFIGURATION_FILENAME = 'critical_path_css.yml'

def initialize
@configurations = YAML.load_file(configuration_file_path)[Rails.env]
end

def base_url
@configurations['base_url']
end

def css_path
@css_path ||= begin
relative_path = @configurations['css_path'] || manifest_path
"#{Rails.root}/public#{relative_path}"
end
end

def manifest_name
@configurations['manifest_name']
end

def routes
@configurations['routes']
end

private

def configuration_file_path
@configuration_file_path ||= Rails.root.join('config', CONFIGURATION_FILENAME)
end

def manifest_path
@manifest_path ||= ActionController::Base.helpers.stylesheet_path(manifest_name)
end
end
end
22 changes: 22 additions & 0 deletions lib/critical_path_css/css_fetcher.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
module CriticalPathCss
class CssFetcher
require 'phantomjs'
require 'critical_path_css/configuration'

PENTHOUSE_PATH = "#{File.dirname(__FILE__)}/../penthouse/penthouse.js"

def initialize
@config = Configuration.new
end

def fetch
@config.routes.map { |route| [route, css_for_route(route)] }.to_h
end

private

def css_for_route(route)
Phantomjs.run(PENTHOUSE_PATH, @config.base_url + route, @config.css_path)
end
end
end
2 changes: 1 addition & 1 deletion lib/critical_path_css/rails/version.rb
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module CriticalPathCSS
module Rails
VERSION = '0.1.0'
VERSION = '0.2.0'
PENTHOUSE_VERSION = '0.3.4'
end
end
10 changes: 3 additions & 7 deletions lib/critical_path_css_rails.rb
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
module CriticalPathCss
require 'phantomjs'
require 'critical_path_css/css_fetcher'

CACHE_NAMESPACE = 'critical-path-css'
PENTHOUSE_PATH = "#{File.dirname(__FILE__)}/penthouse/penthouse.js"

def self.generate(main_css_path, base_url, routes)
full_main_css_path = "#{Rails.root}/public#{main_css_path}"

routes.each do |route|
css = Phantomjs.run(PENTHOUSE_PATH, base_url + route, full_main_css_path)
def self.generate
CssFetcher.new.fetch.each do |route, css|
Rails.cache.write(route, css, namespace: CACHE_NAMESPACE)
end
end
Expand Down
6 changes: 6 additions & 0 deletions lib/generators/critical_path_css/install_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,11 @@ def copy_rake_task
task_filename = 'critical_path_css.rake'
copy_file "../../tasks/#{task_filename}", "lib/tasks/#{task_filename}"
end

# Copy the needed configuration YAML file for generating critical CSS
def copy_config_file
task_filename = 'critical_path_css.yml'
copy_file "../../config/#{task_filename}", "config/#{task_filename}"
end
end
end
9 changes: 1 addition & 8 deletions lib/tasks/critical_path_css.rake
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
require 'critical_path_css_rails'

namespace :critical_path_css do
@base_url = Rails.env.production? ? 'http://example.com' : 'http://localhost:3000'
@routes = %w(
/
)

desc 'Generate critical CSS for the routes defined'
task generate: :environment do
@main_css_path = ActionController::Base.helpers.stylesheet_path('application.css').to_s

CriticalPathCss.generate(@main_css_path, @base_url, @routes)
CriticalPathCss.generate
end
end