critical-path-css-rails 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.codeclimate.yml +4 -0
- data/.rubocop_todo.yml +2 -2
- data/README.md +12 -10
- data/lib/config/critical_path_css.yml +19 -0
- data/lib/critical_path_css/configuration.rb +38 -0
- data/lib/critical_path_css/css_fetcher.rb +22 -0
- data/lib/critical_path_css/rails/version.rb +1 -1
- data/lib/critical_path_css_rails.rb +3 -7
- data/lib/generators/critical_path_css/install_generator.rb +6 -0
- data/lib/tasks/critical_path_css.rake +1 -8
- metadata +6 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8775db565ae10bb4b743f5681dcdab51e8ce9f83
|
4
|
+
data.tar.gz: 91af5fc536b35c5c91dc1e7e278fe8586bf3a07e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f837d78b8e96facc34a2c1f6f330f07d09fd8ebf4371511b4817e8c7686c09cc32e6fba17dc295143a2aeef9b77c114486edf670dd8e2627075297cc7f34e755
|
7
|
+
data.tar.gz: d3e0e3a9a78765572b80bb40ab7b7944b7ae93e493135ad578f901b5e56040bc9bf4bc3c69eff36c589dbfa4b09fcaa71ffd1c65ae4cbd8b6fb9572ea16e2390
|
data/.codeclimate.yml
ADDED
data/.rubocop_todo.yml
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# This configuration was generated by
|
2
2
|
# `rubocop --auto-gen-config`
|
3
|
-
# on 2015-
|
3
|
+
# on 2015-10-03 13:56:01 -0500 using RuboCop version 0.34.1.
|
4
4
|
# The point is for the user to remove these configuration records
|
5
5
|
# one by one as the offenses are removed from the code base.
|
6
6
|
# Note that changes in the inspected code, or installation of new
|
@@ -9,4 +9,4 @@
|
|
9
9
|
# Offense count: 2
|
10
10
|
# Configuration parameters: AllowURI, URISchemes.
|
11
11
|
Metrics/LineLength:
|
12
|
-
Max:
|
12
|
+
Max: 86
|
data/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
# critical-path-css-rails
|
1
|
+
# critical-path-css-rails [](https://codeclimate.com/github/mudbugmedia/critical-path-css-rails)
|
2
2
|
|
3
3
|
Only load the CSS you need for the initial viewport in Rails!
|
4
4
|
|
@@ -14,7 +14,7 @@ This gem uses [PhantomJS](https://github.com/colszowka/phantomjs-gem) and [Penth
|
|
14
14
|
Add `critical-path-css-rails` to your Gemfile:
|
15
15
|
|
16
16
|
```
|
17
|
-
gem 'critical-path-css-rails', '~> 0.
|
17
|
+
gem 'critical-path-css-rails', '~> 0.2.0'
|
18
18
|
```
|
19
19
|
|
20
20
|
Download and install by running:
|
@@ -23,24 +23,26 @@ Download and install by running:
|
|
23
23
|
bundle install
|
24
24
|
```
|
25
25
|
|
26
|
-
|
26
|
+
Run the generator to install the rake task and configuration file:
|
27
27
|
|
28
28
|
```
|
29
29
|
rails generator critical_path_css:install
|
30
30
|
```
|
31
31
|
|
32
|
-
|
32
|
+
The generator adds the following files:
|
33
33
|
|
34
|
+
* `config/critical_path_css.yml`
|
34
35
|
* `lib/tasks/critical_path_css.rake`
|
35
36
|
|
36
37
|
|
37
38
|
## Usage
|
38
39
|
|
39
|
-
First, you'll need to configue a few
|
40
|
+
First, you'll need to configue a few things in the YAML file: `config/critical_path_css.yml`
|
40
41
|
|
41
|
-
*
|
42
|
-
*
|
43
|
-
*
|
42
|
+
* `manifest_name`: If you're using the asset pipeline, add the manifest name.
|
43
|
+
* `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`.
|
44
|
+
* `routes`: List the routes that you would like to generate the critical CSS for. (i.e. /resources, /resources/show/1, etc.)
|
45
|
+
* `base_url`: Add your application's URL for the necessary environments.
|
44
46
|
|
45
47
|
|
46
48
|
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.
|
@@ -57,7 +59,7 @@ rake critical_path_css:generate
|
|
57
59
|
|
58
60
|
To load the generated critical CSS into your layout, in the head tag, insert:
|
59
61
|
|
60
|
-
```
|
62
|
+
```HTML+ERB
|
61
63
|
<style>
|
62
64
|
<%= CriticalPathCss.fetch(request.path) %>
|
63
65
|
</style>
|
@@ -65,7 +67,7 @@ To load the generated critical CSS into your layout, in the head tag, insert:
|
|
65
67
|
|
66
68
|
A simple example using loadcss-rails looks like:
|
67
69
|
|
68
|
-
```
|
70
|
+
```HTML+ERB
|
69
71
|
<style>
|
70
72
|
<%= CriticalPathCss.fetch(request.path) %>
|
71
73
|
</style>
|
@@ -0,0 +1,19 @@
|
|
1
|
+
defaults: &defaults
|
2
|
+
# If using the asset pipeline, provide the manifest name
|
3
|
+
manifest_name: application
|
4
|
+
# Else provide the relative path of your CSS file from the /public directory
|
5
|
+
# css_path: /path/to/css/from/public/main.css
|
6
|
+
routes:
|
7
|
+
- /
|
8
|
+
|
9
|
+
development:
|
10
|
+
<<: *defaults
|
11
|
+
base_url: http://localhost:3000
|
12
|
+
|
13
|
+
staging:
|
14
|
+
<<: *defaults
|
15
|
+
base_url: http://staging.example.com
|
16
|
+
|
17
|
+
production:
|
18
|
+
<<: *defaults
|
19
|
+
base_url: http://example.com
|
@@ -0,0 +1,38 @@
|
|
1
|
+
module CriticalPathCss
|
2
|
+
class Configuration
|
3
|
+
CONFIGURATION_FILENAME = 'critical_path_css.yml'
|
4
|
+
|
5
|
+
def initialize
|
6
|
+
@configurations = YAML.load_file(configuration_file_path)[Rails.env]
|
7
|
+
end
|
8
|
+
|
9
|
+
def base_url
|
10
|
+
@configurations['base_url']
|
11
|
+
end
|
12
|
+
|
13
|
+
def css_path
|
14
|
+
@css_path ||= begin
|
15
|
+
relative_path = @configurations['css_path'] || manifest_path
|
16
|
+
"#{Rails.root}/public#{relative_path}"
|
17
|
+
end
|
18
|
+
end
|
19
|
+
|
20
|
+
def manifest_name
|
21
|
+
@configurations['manifest_name']
|
22
|
+
end
|
23
|
+
|
24
|
+
def routes
|
25
|
+
@configurations['routes']
|
26
|
+
end
|
27
|
+
|
28
|
+
private
|
29
|
+
|
30
|
+
def configuration_file_path
|
31
|
+
@configuration_file_path ||= Rails.root.join('config', CONFIGURATION_FILENAME)
|
32
|
+
end
|
33
|
+
|
34
|
+
def manifest_path
|
35
|
+
@manifest_path ||= ActionController::Base.helpers.stylesheet_path(manifest_name)
|
36
|
+
end
|
37
|
+
end
|
38
|
+
end
|
@@ -0,0 +1,22 @@
|
|
1
|
+
module CriticalPathCss
|
2
|
+
class CssFetcher
|
3
|
+
require 'phantomjs'
|
4
|
+
require 'critical_path_css/configuration'
|
5
|
+
|
6
|
+
PENTHOUSE_PATH = "#{File.dirname(__FILE__)}/../penthouse/penthouse.js"
|
7
|
+
|
8
|
+
def initialize
|
9
|
+
@config = Configuration.new
|
10
|
+
end
|
11
|
+
|
12
|
+
def fetch
|
13
|
+
@config.routes.map { |route| [route, css_for_route(route)] }.to_h
|
14
|
+
end
|
15
|
+
|
16
|
+
private
|
17
|
+
|
18
|
+
def css_for_route(route)
|
19
|
+
Phantomjs.run(PENTHOUSE_PATH, @config.base_url + route, @config.css_path)
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
@@ -1,14 +1,10 @@
|
|
1
1
|
module CriticalPathCss
|
2
|
-
require '
|
2
|
+
require 'critical_path_css/css_fetcher'
|
3
3
|
|
4
4
|
CACHE_NAMESPACE = 'critical-path-css'
|
5
|
-
PENTHOUSE_PATH = "#{File.dirname(__FILE__)}/penthouse/penthouse.js"
|
6
5
|
|
7
|
-
def self.generate
|
8
|
-
|
9
|
-
|
10
|
-
routes.each do |route|
|
11
|
-
css = Phantomjs.run(PENTHOUSE_PATH, base_url + route, full_main_css_path)
|
6
|
+
def self.generate
|
7
|
+
CssFetcher.new.fetch.each do |route, css|
|
12
8
|
Rails.cache.write(route, css, namespace: CACHE_NAMESPACE)
|
13
9
|
end
|
14
10
|
end
|
@@ -9,5 +9,11 @@ module CriticalPathCss
|
|
9
9
|
task_filename = 'critical_path_css.rake'
|
10
10
|
copy_file "../../tasks/#{task_filename}", "lib/tasks/#{task_filename}"
|
11
11
|
end
|
12
|
+
|
13
|
+
# Copy the needed configuration YAML file for generating critical CSS
|
14
|
+
def copy_config_file
|
15
|
+
task_filename = 'critical_path_css.yml'
|
16
|
+
copy_file "../../config/#{task_filename}", "config/#{task_filename}"
|
17
|
+
end
|
12
18
|
end
|
13
19
|
end
|
@@ -1,15 +1,8 @@
|
|
1
1
|
require 'critical_path_css_rails'
|
2
2
|
|
3
3
|
namespace :critical_path_css do
|
4
|
-
@base_url = Rails.env.production? ? 'http://example.com' : 'http://localhost:3000'
|
5
|
-
@routes = %w(
|
6
|
-
/
|
7
|
-
)
|
8
|
-
|
9
4
|
desc 'Generate critical CSS for the routes defined'
|
10
5
|
task generate: :environment do
|
11
|
-
|
12
|
-
|
13
|
-
CriticalPathCss.generate(@main_css_path, @base_url, @routes)
|
6
|
+
CriticalPathCss.generate
|
14
7
|
end
|
15
8
|
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: critical-path-css-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Michael Misshore
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-
|
11
|
+
date: 2015-10-03 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: phantomjs
|
@@ -30,6 +30,7 @@ executables: []
|
|
30
30
|
extensions: []
|
31
31
|
extra_rdoc_files: []
|
32
32
|
files:
|
33
|
+
- ".codeclimate.yml"
|
33
34
|
- ".gitignore"
|
34
35
|
- ".rubocop.yml"
|
35
36
|
- ".rubocop_todo.yml"
|
@@ -38,6 +39,9 @@ files:
|
|
38
39
|
- LICENSE
|
39
40
|
- README.md
|
40
41
|
- critical-path-css-rails.gemspec
|
42
|
+
- lib/config/critical_path_css.yml
|
43
|
+
- lib/critical_path_css/configuration.rb
|
44
|
+
- lib/critical_path_css/css_fetcher.rb
|
41
45
|
- lib/critical_path_css/rails/engine.rb
|
42
46
|
- lib/critical_path_css/rails/version.rb
|
43
47
|
- lib/critical_path_css_rails.rb
|