hanami-assets 1.3.4 → 2.1.0.beta2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +27 -0
- data/LICENSE.md +1 -1
- data/README.md +92 -315
- data/bin/hanami-assets +7 -6
- data/hanami-assets.gemspec +23 -28
- data/lib/hanami/assets/asset.rb +83 -0
- data/lib/hanami/assets/base_url.rb +64 -0
- data/lib/hanami/assets/config.rb +106 -0
- data/lib/hanami/assets/errors.rb +46 -0
- data/lib/hanami/assets/version.rb +4 -2
- data/lib/hanami/assets.rb +63 -143
- data/lib/hanami-assets.rb +3 -0
- metadata +36 -104
- data/lib/hanami/assets/bundler/asset.rb +0 -98
- data/lib/hanami/assets/bundler/compressor.rb +0 -61
- data/lib/hanami/assets/bundler/manifest_entry.rb +0 -62
- data/lib/hanami/assets/bundler.rb +0 -152
- data/lib/hanami/assets/cache.rb +0 -100
- data/lib/hanami/assets/compiler.rb +0 -285
- data/lib/hanami/assets/compilers/less.rb +0 -29
- data/lib/hanami/assets/compilers/sass.rb +0 -59
- data/lib/hanami/assets/compressors/abstract.rb +0 -119
- data/lib/hanami/assets/compressors/builtin_javascript.rb +0 -36
- data/lib/hanami/assets/compressors/builtin_stylesheet.rb +0 -57
- data/lib/hanami/assets/compressors/closure_javascript.rb +0 -25
- data/lib/hanami/assets/compressors/javascript.rb +0 -77
- data/lib/hanami/assets/compressors/jsmin.rb +0 -284
- data/lib/hanami/assets/compressors/null_compressor.rb +0 -19
- data/lib/hanami/assets/compressors/sass_stylesheet.rb +0 -36
- data/lib/hanami/assets/compressors/stylesheet.rb +0 -77
- data/lib/hanami/assets/compressors/uglifier_javascript.rb +0 -25
- data/lib/hanami/assets/compressors/yui_javascript.rb +0 -25
- data/lib/hanami/assets/compressors/yui_stylesheet.rb +0 -25
- data/lib/hanami/assets/config/global_sources.rb +0 -50
- data/lib/hanami/assets/config/manifest.rb +0 -140
- data/lib/hanami/assets/config/sources.rb +0 -78
- data/lib/hanami/assets/configuration.rb +0 -652
- data/lib/hanami/assets/helpers.rb +0 -935
- data/lib/hanami/assets/precompiler.rb +0 -95
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: da6a6be342f7e3a9e3147c0583c3ad707a0173a3deab09e0d98e48b1cd12adb3
|
4
|
+
data.tar.gz: ace54aa27a7f37393e94643bcf841c1b1a98260d69b83d0687e95aaef5fa5e5f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 98d2d451da096daa3e3ee398985c175de38cc7745ee46e037176ac689e0387611473eca736b79fcddfe4436456c693fcb99bf60f27a46226bc7d7e590f0d341d
|
7
|
+
data.tar.gz: f540b8ed261fba7efcc2c0c48a1e5b5656f1a6fd9b69b403e2bc29d092cb9961760c34695c57df961f67983d175a32994dce192b699067a03623a24abfaa58e8
|
data/CHANGELOG.md
CHANGED
@@ -1,6 +1,33 @@
|
|
1
1
|
# Hanami::Assets
|
2
2
|
Assets management for Ruby web applications
|
3
3
|
|
4
|
+
## v2.1.0.beta2 - 2023-10-04
|
5
|
+
### Added
|
6
|
+
- [Luca Guidi] Official support for Ruby: Ruby 3.1, and 3.2
|
7
|
+
|
8
|
+
### Changed
|
9
|
+
- [Luca Guidi] Drop support for Ruby: MRI 2 and JRuby
|
10
|
+
- [Luca Guidi] This gem now requires a working Node and Yarn installation
|
11
|
+
- [Tim Riley] Changed the gem to load using Zeitwerk, via `require "hanami/assets"`
|
12
|
+
- [Tim Riley] Changed `Hanami::Assets` to a class, initialized with a `Hanami::Assets::Config` (see below) and providing a `#[]` method returning a `Hanami::Assets::Asset` instance per asset.
|
13
|
+
- [Tim Riley] Moved `Hanami::Assets::Helpers` to `Hanami::Helpers::AssetsHelper` in the hanami gem (along with various helper methods renamed; see the hanami CHANGELOG for details)
|
14
|
+
- [Luca Guidi] Renamed `Hanami::Assets::Configuration` to `Config`
|
15
|
+
- [Luca Guidi] Removed `Hanami::Assets.configure`, use `Hanami::Assets::Config.new`
|
16
|
+
- [Luca Guidi] Removed `Hanami::Assets.deploy`, `.precompile`, `.load!` as precompile process is now handled via JavaScript
|
17
|
+
- [Luca Guidi] Removed `Hanami::Assets.sources`, as third-party libraries should be handled via Yarn
|
18
|
+
- [Luca Guidi] Removed `Hanami::Assets::Config#fingerprint`, as fingerprinting will be always activated
|
19
|
+
- [Luca Guidi] Changed `Hanami::Assets::Config#subresource_integrity`. To activate the feature, pass an array of algorithms to use (e.g. `config.subresource_integrity = ["sha-384"]`)
|
20
|
+
- [Luca Guidi] Removed `Hanami::Assets::Config#cdn`. To activate the feature, pass the CDN base URL to the initializer of the configuration (`base_url` keyword argument).
|
21
|
+
- [Luca Guidi] Removed `Hanami::Assets::Config#javascript_compressor` and `stylesheet_compressor`, as the compression is now handled via JavaScript
|
22
|
+
- [Luca Guidi] Removed `Hanami::Assets::Config#scheme`, `#host`, `#port`, and `#prefix`. Use `base_url` keyword argument to pass to configuration initializer
|
23
|
+
- [Luca Guidi] Removed `Hanami::Assets::Config#root`, `#public_directory`, `#destination_directory`, and `#manifest` as they will now looked up via conventions
|
24
|
+
- [Luca Guidi] Moved `Hanami::Assets::Precompiler` and `Watcher` to `hanami-cli`
|
25
|
+
|
26
|
+
## v1.3.5 - 2021-01-14
|
27
|
+
### Added
|
28
|
+
- [Luca Guidi] Official support for Ruby: MRI 3.0
|
29
|
+
- [Luca Guidi] Official support for Ruby: MRI 2.7
|
30
|
+
|
4
31
|
## v1.3.4 - 2019-10-11
|
5
32
|
### Fixed
|
6
33
|
- [unleashy] Precompile assets using binary mode to ensure compatibility with Windows
|
data/LICENSE.md
CHANGED
data/README.md
CHANGED
@@ -5,9 +5,8 @@ Assets management for Ruby web projects
|
|
5
5
|
## Status
|
6
6
|
|
7
7
|
[![Gem Version](https://badge.fury.io/rb/hanami-assets.svg)](https://badge.fury.io/rb/hanami-assets)
|
8
|
-
[![
|
9
|
-
[![
|
10
|
-
[![Test Coverage](https://codecov.io/gh/hanami/assets/branch/master/graph/badge.svg)](https://codecov.io/gh/hanami/assets)
|
8
|
+
[![CI](https://github.com/hanami/assets/workflows/ci/badge.svg?branch=main)](https://github.com/hanami/assets/actions?query=workflow%3Aci+branch%3Amain)
|
9
|
+
[![Test Coverage](https://codecov.io/gh/hanami/assets/branch/main/graph/badge.svg)](https://codecov.io/gh/hanami/assets)
|
11
10
|
[![Depfu](https://badges.depfu.com/badges/4b37347bd74042ff96477495cc16531d/overview.svg)](https://depfu.com/github/hanami/assets?project=Bundler)
|
12
11
|
[![Inline Docs](http://inch-ci.org/github/hanami/assets.svg)](http://inch-ci.org/github/hanami/assets)
|
13
12
|
|
@@ -25,14 +24,14 @@ Assets management for Ruby web projects
|
|
25
24
|
|
26
25
|
## Rubies
|
27
26
|
|
28
|
-
__Hanami::Assets__ supports Ruby (MRI)
|
27
|
+
__Hanami::Assets__ supports Ruby (MRI) 3.0+
|
29
28
|
|
30
29
|
## Installation
|
31
30
|
|
32
31
|
Add this line to your application's Gemfile:
|
33
32
|
|
34
33
|
```ruby
|
35
|
-
gem
|
34
|
+
gem "hanami-assets"
|
36
35
|
```
|
37
36
|
|
38
37
|
And then execute:
|
@@ -49,9 +48,14 @@ $ gem install hanami-assets
|
|
49
48
|
|
50
49
|
## Usage
|
51
50
|
|
51
|
+
### Command Line (CLI)
|
52
|
+
|
53
|
+
During development run `bundle exec hanami server`.
|
54
|
+
Your app will start the assets management.
|
55
|
+
|
52
56
|
### Helpers
|
53
57
|
|
54
|
-
|
58
|
+
Hanami Assets provides asset-specific helpers to be used in templates.
|
55
59
|
They resolve one or multiple sources into corresponding HTML tags.
|
56
60
|
Those sources can be either a name of a local asset or an absolute URL.
|
57
61
|
|
@@ -62,13 +66,13 @@ Given the following template:
|
|
62
66
|
<html>
|
63
67
|
<head>
|
64
68
|
<title>Assets example</title>
|
65
|
-
<%=
|
69
|
+
<%= assets.css "reset", "app" %>
|
66
70
|
</head>
|
67
71
|
|
68
72
|
<body>
|
69
73
|
<!-- ... -->
|
70
|
-
<%=
|
71
|
-
<%=
|
74
|
+
<%= assets.js "app" %>
|
75
|
+
<%= assets.js "https://cdn.somethirdparty.script/foo.js", async: true %>
|
72
76
|
</body>
|
73
77
|
</html>
|
74
78
|
```
|
@@ -81,349 +85,145 @@ It will output this markup:
|
|
81
85
|
<head>
|
82
86
|
<title>Assets example</title>
|
83
87
|
<link href="/assets/reset.css" type="text/css" rel="stylesheet">
|
84
|
-
<link href="/assets/
|
85
|
-
<link href="/assets/main.css" type="text/css" rel="stylesheet">
|
88
|
+
<link href="/assets/app.css" type="text/css" rel="stylesheet">
|
86
89
|
</head>
|
87
90
|
|
88
91
|
<body>
|
89
92
|
<!-- ... -->
|
90
|
-
<script src="
|
91
|
-
<script src="/
|
92
|
-
<script src="/assets/modals.js" type="text/javascript"></script>
|
93
|
+
<script src="/assets/app.js" type="text/javascript"></script>
|
94
|
+
<script src="https://cdn.somethirdparty.script/foo.js" type="text/javascript" async></script>
|
93
95
|
</body>
|
94
96
|
</html>
|
95
97
|
```
|
96
98
|
|
97
|
-
Let's have a look at the corresponding Ruby code.
|
98
|
-
In this example we use ERb, but remember that `Hanami::Assets` is compatible with
|
99
|
-
all the rendering engines such as HAML, Slim, Mustache, etc..
|
100
|
-
|
101
|
-
```ruby
|
102
|
-
require 'erb'
|
103
|
-
require 'hanami/assets'
|
104
|
-
require 'hanami/assets/helpers'
|
105
|
-
|
106
|
-
class View
|
107
|
-
include Hanami::Assets::Helpers
|
108
|
-
|
109
|
-
def initialize
|
110
|
-
@template = File.read('template.erb')
|
111
|
-
@engine = ERB.new(@template)
|
112
|
-
end
|
113
|
-
|
114
|
-
def render
|
115
|
-
@engine.result(binding)
|
116
|
-
end
|
117
|
-
end
|
118
|
-
|
119
|
-
View.new.render # => HTML markup
|
120
|
-
```
|
121
|
-
|
122
|
-
For advanced configurations, please have a look at
|
123
|
-
[`Hanami::Assets::Configuration`](https://github.com/hanami/assets/blob/master/lib/hanami/assets/configuration.rb).
|
124
|
-
|
125
99
|
### Available Helpers
|
126
100
|
|
127
101
|
This gem ships with the following helpers:
|
128
102
|
|
129
|
-
* `javascript`
|
130
|
-
* `stylesheet`
|
103
|
+
* `javascript` (aliased as `js`)
|
104
|
+
* `stylesheet` (aliased as `css`)
|
131
105
|
* `favicon`
|
132
|
-
* `image`
|
106
|
+
* `image` (aliased as `img`)
|
133
107
|
* `video`
|
134
108
|
* `audio`
|
135
|
-
* `
|
136
|
-
* `asset_url`
|
137
|
-
|
138
|
-
### Development mode
|
139
|
-
|
140
|
-
`Hanami::Assets` can help you during the development process of your application.
|
141
|
-
It can manage multiple source directories for each asset type or run a
|
142
|
-
preprocessor for you.
|
143
|
-
|
144
|
-
#### Sources
|
145
|
-
|
146
|
-
Imagine to have your application's javascripts under `app/assets/javascripts` and that
|
147
|
-
those assets depends on a vendored version of jQuery.
|
148
|
-
|
149
|
-
```ruby
|
150
|
-
require 'hanami/assets'
|
151
|
-
|
152
|
-
Hanami::Assets.configure do
|
153
|
-
compile true
|
154
|
-
|
155
|
-
sources << [
|
156
|
-
'app/assets',
|
157
|
-
'vendor/jquery'
|
158
|
-
]
|
159
|
-
end
|
160
|
-
```
|
109
|
+
* `path`
|
161
110
|
|
162
|
-
|
111
|
+
## App Structure
|
163
112
|
|
164
|
-
|
165
|
-
<%= javascript 'jquery', 'jquery-ui', 'login' %>
|
166
|
-
```
|
167
|
-
|
168
|
-
`Hanami::Assets` looks at the defined sources and **lazily copies** those files
|
169
|
-
under `public/assets` (by default), before the markup is generated.
|
113
|
+
Hanami applications are generated via `hanami new` CLI command.
|
170
114
|
|
171
|
-
|
115
|
+
Among other directories, it generates a specific structure for assets:
|
172
116
|
|
173
117
|
```shell
|
174
|
-
|
175
|
-
|
176
|
-
└──
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
118
|
+
$ tree app/assets
|
119
|
+
├── images
|
120
|
+
│ └── favicon.ico
|
121
|
+
├── javascripts
|
122
|
+
│ └── app.ts
|
123
|
+
└── stylesheets
|
124
|
+
└── app.css
|
181
125
|
```
|
182
126
|
|
183
|
-
|
184
|
-
|
185
|
-
If in the example above we had a `jquery.js` under `app/assets/javascripts/**/*.js`
|
186
|
-
that file would be copied into the public directory instead of the one under
|
187
|
-
`vendor/jquery`. The reason is because we declared `app/assets/javascripts` first.
|
188
|
-
|
189
|
-
#### Preprocessors
|
127
|
+
#### Entry Points
|
190
128
|
|
191
|
-
|
192
|
-
|
129
|
+
Entry Points are the JavaScript files or modules that serve as the starting points of your application.
|
130
|
+
They define the scope of your bundling process and determine which parts of your code will be included in the final output.
|
131
|
+
By understanding the dependencies of your entry points, Hanami Assets can create efficient and optimized bundles for your JavaScript or TypeScript applications.
|
193
132
|
|
194
|
-
|
195
|
-
|
133
|
+
When Hanami Assets encounters an import or require statement for an asset, it process the asset file to the output directory.
|
134
|
+
This process includes any kind of asset: other JavaScript files, stylesheets, images **referenced from the Entry Point**.
|
196
135
|
|
197
|
-
|
198
|
-
The first one is mandatory and it's used to understand which asset type we are
|
199
|
-
handling: `.css` for stylesheets.
|
200
|
-
The second one is optional and it's for a preprocessor: `.scss` for Sass.
|
136
|
+
The default entry points are:
|
201
137
|
|
202
|
-
|
203
|
-
|
204
|
-
require 'hanami/assets'
|
138
|
+
* `app/assets/javascripts/app.ts`
|
139
|
+
* `slices/[slice-name]/assets/javascripts/app.ts`
|
205
140
|
|
206
|
-
|
207
|
-
compile true
|
141
|
+
You can specify custom Entry Points, by adding an `app.{js,ts,mjs,mts,tsx,jsx}` file into the assets directory of the app or a slice.
|
208
142
|
|
209
|
-
|
210
|
-
'assets',
|
211
|
-
'vendor/assets'
|
212
|
-
]
|
213
|
-
end
|
214
|
-
```
|
143
|
+
An example is: `app/assets/javascripts/login/app.ts` to define a new Entry Point for a Login page where you want to have a more lightweight bundle.
|
215
144
|
|
216
|
-
|
145
|
+
#### Static Assets
|
217
146
|
|
218
|
-
|
219
|
-
|
220
|
-
```
|
147
|
+
Except for `javascripts` and `stylesheets` directories, all the other directories are considered **static**.
|
148
|
+
Their files will be copied as they are to the destination directory.
|
221
149
|
|
222
|
-
|
150
|
+
If you have a custom directory `app/assets/fonts`, all the fonts are copied to the destination direcotry.
|
223
151
|
|
224
|
-
|
225
|
-
% tree public
|
226
|
-
public/
|
227
|
-
└── assets
|
228
|
-
├── reset.css
|
229
|
-
└── main.css
|
230
|
-
```
|
152
|
+
#### Destination Directory
|
231
153
|
|
232
|
-
|
154
|
+
The destination directory is `public/assets`.
|
233
155
|
|
234
|
-
|
156
|
+
### Sources
|
235
157
|
|
236
|
-
|
158
|
+
Hanami Assets works with [Yarn](https://yarnpkg.com/).
|
237
159
|
|
238
|
-
|
160
|
+
In order to add/remove a source to your application, you should follow Yarn's dependencies management.
|
239
161
|
|
240
|
-
|
241
|
-
It isn't fully [supported](https://kangax.github.io/compat-table/es6/) yet by browsers, but it's the future of JavaScript.
|
162
|
+
### Preprocessors
|
242
163
|
|
243
|
-
|
244
|
-
The most popular tool for this is [Babel](https://babeljs.io), which we support.
|
164
|
+
Hanami Assets is able to preprocess any kind of JavaScript and CSS flavor.
|
245
165
|
|
246
166
|
### Deployment
|
247
167
|
|
248
|
-
|
249
|
-
|
250
|
-
__NOTE__: If you're using `Hanami::Assets` with the full `Hanami` framework, you should use `bundle exec hanami assets precompile` instead of `hanami-assets`.
|
251
|
-
|
252
|
-
Let's say we have an application that has a main file that requires the entire codebase (`config/environment.rb`), a gem that brings in Ember.js code, and the following sources:
|
253
|
-
|
254
|
-
```shell
|
255
|
-
% tree .
|
256
|
-
├── apps
|
257
|
-
│ ├── admin
|
258
|
-
│ │ ├── assets
|
259
|
-
│ │ │ └── js
|
260
|
-
│ │ │ ├── application.js
|
261
|
-
│ │ │ └── zepto.js
|
262
|
-
# ...
|
263
|
-
│ ├── metrics
|
264
|
-
│ │ ├── assets
|
265
|
-
│ │ │ └── javascripts
|
266
|
-
│ │ │ └── dashboard.js
|
267
|
-
# ...
|
268
|
-
│ └── web
|
269
|
-
│ ├── assets
|
270
|
-
│ │ ├── images
|
271
|
-
│ │ │ └── bookshelf.jpg
|
272
|
-
│ │ └── javascripts
|
273
|
-
│ │ └── application.js
|
274
|
-
# ...
|
275
|
-
│ └── vendor
|
276
|
-
│ └── assets
|
277
|
-
│ └── javascripts
|
278
|
-
│ └── jquery.js
|
279
|
-
└── config
|
280
|
-
└── environment.rb
|
281
|
-
```
|
282
|
-
|
283
|
-
In order to deploy, we can run:
|
284
|
-
|
285
|
-
```shell
|
286
|
-
bundle exec hanami-assets --config=config/environment.rb
|
287
|
-
```
|
168
|
+
To process the assets during deployment run `bundle exec hanami assets compile`.
|
288
169
|
|
289
|
-
|
170
|
+
The destination directory will contain the processed assets with an hashed name.
|
290
171
|
|
291
|
-
|
292
|
-
tree public
|
293
|
-
public
|
294
|
-
├── assets
|
295
|
-
│ ├── admin
|
296
|
-
│ │ ├── application-28a6b886de2372ee3922fcaf3f78f2d8.js
|
297
|
-
│ │ ├── application.js
|
298
|
-
│ │ ├── ember-b2d6de1e99c79a0e52cf5c205aa2e07a.js
|
299
|
-
│ │ ├── ember-source-e74117fc6ba74418b2601ffff9eb1568.js
|
300
|
-
│ │ ├── ember-source.js
|
301
|
-
│ │ ├── ember.js
|
302
|
-
│ │ ├── zepto-ca736a378613d484138dec4e69be99b6.js
|
303
|
-
│ │ └── zepto.js
|
304
|
-
│ ├── application-d1829dc353b734e3adc24855693b70f9.js
|
305
|
-
│ ├── application.js
|
306
|
-
│ ├── bookshelf-237ecbedf745af5a477e380f0232039a.jpg
|
307
|
-
│ ├── bookshelf.jpg
|
308
|
-
│ ├── ember-b2d6de1e99c79a0e52cf5c205aa2e07a.js
|
309
|
-
│ ├── ember-source-e74117fc6ba74418b2601ffff9eb1568.js
|
310
|
-
│ ├── ember-source.js
|
311
|
-
│ ├── ember.js
|
312
|
-
│ ├── jquery-05277a4edea56b7f82a4c1442159e183.js
|
313
|
-
│ ├── jquery.js
|
314
|
-
│ └── metrics
|
315
|
-
│ ├── dashboard-7766a63ececc63a7a629bfb0666e9c62.js
|
316
|
-
│ ├── dashboard.js
|
317
|
-
│ ├── ember-b2d6de1e99c79a0e52cf5c205aa2e07a.js
|
318
|
-
│ ├── ember-source-e74117fc6ba74418b2601ffff9eb1568.js
|
319
|
-
│ ├── ember-source.js
|
320
|
-
│ └── ember.js
|
321
|
-
└── assets.json
|
322
|
-
```
|
172
|
+
#### Fingerprint Mode
|
323
173
|
|
324
|
-
|
174
|
+
Asset fingerprinting is a technique that involves adding a unique identifier to the filenames of static assets to ensure cache-busting.
|
175
|
+
By doing so, you can safely cache and deliver updated versions of assets to client browsers, avoiding the use of outdated cached versions and ensuring a consistent and up-to-date user experience.
|
325
176
|
|
326
|
-
|
327
|
-
The goal of this step is to have lighter assets, which will be served faster to browsers.
|
177
|
+
During the deployment process, Hanami Assets appends to the file name a unique hash.
|
328
178
|
|
329
|
-
|
179
|
+
Example: `app/assets/javascripts/app.ts` -> `public/assets/app-QECGTTYG.js`
|
330
180
|
|
331
|
-
|
181
|
+
It creates a `/public/assets.json` to map the original asset name to the fingerprint name.
|
332
182
|
|
333
|
-
|
334
|
-
|
335
|
-
##### JavaScript Compressors
|
336
|
-
|
337
|
-
Hanami can use the following compressors (aka minifiers) for JavaScript.
|
338
|
-
|
339
|
-
* `:builtin` - Ruby based implementation of jsmin. It doesn't require any external gem.
|
340
|
-
* `:yui` - [YUI Compressor](http://yui.github.io/yuicompressor), it depends on [`yui-compressor`](https://rubygems.org/gems/yui-compressor) gem and it requires Java 1.4+
|
341
|
-
* `:uglifier` - [UglifyJS](http://lisperator.net/uglifyjs), it depends on [`uglifier`](https://rubygems.org/gems/uglifier) gem and it requires Node.js
|
342
|
-
* `:closure` - [Google Closure Compiler](https://developers.google.com/closure/compiler), it depends on [`closure-compiler`](https://rubygems.org/gems/closure-compiler) gem and it requires Java
|
343
|
-
|
344
|
-
```ruby
|
345
|
-
Hanami::Assets.configure do
|
346
|
-
javascript_compressor :uglifier
|
347
|
-
end
|
348
|
-
```
|
349
|
-
|
350
|
-
##### Stylesheet Compressors
|
351
|
-
|
352
|
-
Hanami can use the following compressors (aka minifiers) for stylesheets.
|
353
|
-
|
354
|
-
* `:builtin` - Ruby based compressor. It doesn't require any external gem. It's fast, but not an efficient compressor.
|
355
|
-
* `:yui` - [YUI Compressor](http://yui.github.io/yuicompressor), it depends on [`yui-compressor`](https://rubygems.org/gems/yui-compressor) gem and it requires Java 1.4+
|
356
|
-
* `:sass` - [Sass](http://sass-lang.com/), it depends on [`sassc`](https://rubygems.org/gems/sassc) gem
|
357
|
-
|
358
|
-
```ruby
|
359
|
-
Hanami::Assets.configure do
|
360
|
-
stylesheet_compressor :sass
|
361
|
-
end
|
362
|
-
```
|
363
|
-
|
364
|
-
##### Custom Compressors
|
365
|
-
|
366
|
-
We can specify our own minifiers:
|
367
|
-
|
368
|
-
```ruby
|
369
|
-
Hanami::Assets.configure do
|
370
|
-
javascript_compressor MyJavascriptCompressor.new
|
371
|
-
stylesheet_compressor MyStylesheetCompressor.new
|
372
|
-
end
|
373
|
-
```
|
374
|
-
|
375
|
-
### Fingerprint Mode
|
376
|
-
|
377
|
-
This is a mode that can be activated via configuration and it's suitable for production environments.
|
378
|
-
When generating files, it adds a string to the end of each file name, which is a [checksum](https://en.wikipedia.org/wiki/Checksum) of its contents.
|
379
|
-
This lets you leverage caching while still ensuring that clients get the most up-to-date assets (this is known as *cache busting*).
|
380
|
-
|
381
|
-
```ruby
|
382
|
-
Hanami::Assets.configure do
|
383
|
-
fingerprint true
|
384
|
-
end
|
385
|
-
```
|
386
|
-
|
387
|
-
Once turned on, it will look at `/public/assets.json`, and helpers such as `javascript` will return a relative URL that includes the fingerprint of the asset.
|
183
|
+
The simple usage of the `js` helper, will be automatically mapped for you:
|
388
184
|
|
389
185
|
```erb
|
390
|
-
<%=
|
186
|
+
<%= assets.js "app" %>
|
391
187
|
```
|
392
188
|
|
393
189
|
```html
|
394
|
-
<script src="/assets/
|
190
|
+
<script src="/assets/app-QECGTTYG.js" type="text/javascript"></script>
|
395
191
|
```
|
396
192
|
|
397
|
-
|
193
|
+
#### Subresource Integrity (SRI) Mode
|
398
194
|
|
399
|
-
|
195
|
+
Subresource Integrity (SRI) is a security mechanism that allows browsers to verify the integrity of external resources by comparing their content against a cryptographic hash. It helps protect against unauthorized modifications to external scripts and enhances the security and trustworthiness of web applications.
|
400
196
|
|
401
197
|
```ruby
|
402
|
-
|
403
|
-
|
198
|
+
module MyApp
|
199
|
+
class App < Hanami::App
|
200
|
+
config.assets.subresource_integrity = ["sha-384"]
|
201
|
+
end
|
404
202
|
end
|
405
203
|
```
|
406
204
|
|
407
205
|
Once turned on, it will look at `/public/assets.json`, and helpers such as `javascript` will include an `integrity` and `crossorigin` attribute.
|
408
206
|
|
409
207
|
```erb
|
410
|
-
<%=
|
208
|
+
<%= assets.js "app" %>
|
411
209
|
```
|
412
210
|
|
413
211
|
```html
|
414
|
-
<script src="/assets/
|
212
|
+
<script src="/assets/app-QECGTTYG.js" type="text/javascript" integrity="sha384-d9ndh67iVrvaACuWjEDJDJlThKvAOdILG011RxYJt1dQynvf4JXNORcUiZ9nO7lP" crossorigin="anonymous"></script>
|
415
213
|
```
|
416
214
|
|
417
|
-
|
215
|
+
#### Content Delivery Network (CDN) Mode
|
216
|
+
|
217
|
+
A Content Delivery Network (CDN) is a globally distributed network of servers strategically located in multiple geographical locations.
|
218
|
+
CDNs are designed to improve the performance, availability, and scalability of websites and web applications by reducing latency and efficiently delivering content to end users.
|
418
219
|
|
419
220
|
A Hanami project can serve assets via a Content Delivery Network (CDN).
|
420
221
|
|
421
222
|
```ruby
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
cdn true
|
223
|
+
module MyApp
|
224
|
+
class App < Hanami::App
|
225
|
+
config.assets.base_url = "https://123.cloudfront.net"
|
226
|
+
end
|
427
227
|
end
|
428
228
|
```
|
429
229
|
|
@@ -437,47 +237,26 @@ From now on, helpers will return the absolute URL for the asset, hosted on the C
|
|
437
237
|
<script src="https://123.cloudfront.net/assets/application-d1829dc353b734e3adc24855693b70f9.js" type="text/javascript"></script>
|
438
238
|
```
|
439
239
|
|
440
|
-
|
441
|
-
|
442
|
-
If you're using `hanami-assets` without `hanami`, you must explicitly boot the framework with:
|
443
|
-
|
444
|
-
```ruby
|
445
|
-
Hanami::Assets.configure do
|
446
|
-
# ...
|
447
|
-
end.load!
|
240
|
+
```erb
|
241
|
+
<%= assets.js "app" %>
|
448
242
|
```
|
449
243
|
|
450
|
-
|
451
|
-
|
452
|
-
```ruby
|
453
|
-
Hanami::Assets.configure do
|
454
|
-
# ...
|
455
|
-
end
|
456
|
-
|
457
|
-
# ...
|
458
|
-
|
459
|
-
Hanami::Assets.load!
|
244
|
+
```html
|
245
|
+
<script src="https://123.cloudfront.net/assets/app-QECGTTYG.js" type="text/javascript"></script>
|
460
246
|
```
|
461
247
|
|
462
|
-
|
248
|
+
NOTE: We suggest to use SRI mode when using CDN.
|
463
249
|
|
464
|
-
|
250
|
+
## Development
|
465
251
|
|
466
|
-
|
252
|
+
Install:
|
467
253
|
|
468
|
-
|
469
|
-
|
470
|
-
Hanami::Assets.sources << '/path/to/jquery'
|
471
|
-
```
|
472
|
-
|
473
|
-
## Running tests
|
254
|
+
* Node
|
255
|
+
* NPM
|
474
256
|
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
```sh
|
480
|
-
bundle exec rake test
|
257
|
+
```bash
|
258
|
+
$ npm install
|
259
|
+
$ bundle exec rake test
|
481
260
|
```
|
482
261
|
|
483
262
|
## Versioning
|
@@ -494,6 +273,4 @@ __Hanami::Assets__ uses [Semantic Versioning 2.0.0](http://semver.org)
|
|
494
273
|
|
495
274
|
## Copyright
|
496
275
|
|
497
|
-
Copyright © 2014-
|
498
|
-
|
499
|
-
This project was formerly known as Lotus (`lotus-assets`).
|
276
|
+
Copyright © 2014-2023 Hanami Team – Released under MIT License
|
data/bin/hanami-assets
CHANGED
@@ -1,22 +1,23 @@
|
|
1
1
|
#!/usr/bin/env ruby
|
2
|
+
# frozen_string_literal: true
|
2
3
|
|
3
|
-
require
|
4
|
-
require
|
4
|
+
require "optparse"
|
5
|
+
require "pathname"
|
5
6
|
|
6
7
|
options = {}
|
7
8
|
OptionParser.new do |opts|
|
8
|
-
opts.banner =
|
9
|
+
opts.banner = "Usage: hanami-assets --config=path/to/config.rb"
|
9
10
|
|
10
|
-
opts.on(
|
11
|
+
opts.on("-c", "--config FILE", "Path to config") do |c|
|
11
12
|
options[:config] = c
|
12
13
|
end
|
13
14
|
end.parse!
|
14
15
|
|
15
|
-
config = options.fetch(:config) { raise ArgumentError.new(
|
16
|
+
config = options.fetch(:config) { raise ArgumentError.new("You must specify a configuration file") }
|
16
17
|
config = Pathname.new(config)
|
17
18
|
config.exist? or raise ArgumentError.new("Cannot find configuration file: #{config}")
|
18
19
|
|
19
|
-
require
|
20
|
+
require "hanami/assets"
|
20
21
|
load config
|
21
22
|
|
22
23
|
Hanami::Assets.deploy
|