You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: guides/source/asset_pipeline.md
+15-15Lines changed: 15 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ passing the `--skip-asset-pipeline` option.
30
30
$ rails new appname --skip-asset-pipeline
31
31
```
32
32
33
-
NOTE: This guide is focusing on the default asset pipeline using only `sprockets` for CSS and `importmap-rails` for JavaScript processing. The main limitation of those two is that there is no support for transpiling so you can't use things like `Babel`, `Typescript`, `Sass`, `React JSX format` or `TailwindCSS`. We encourage you to read the [Alternative Libraries section](#alternative-libraries) if you need transpiling for your JavaScript/CSS.
33
+
NOTE: This guide focuses on the default asset pipeline using only `sprockets` for CSS and `importmap-rails` for JavaScript processing. The main limitation of those two is that there is no support for transpiling so you can't use things like `Babel`, `Typescript`, `Sass`, `React JSX format` or `TailwindCSS`. We encourage you to read the [Alternative Libraries section](#alternative-libraries) if you need transpiling for your JavaScript/CSS.
34
34
35
35
## Main Features
36
36
@@ -155,7 +155,7 @@ All of the configured import maps should be attached in `<head>` element of your
155
155
156
156
### Using npm packages via JavaScript CDNs
157
157
158
-
You can use the`./bin/importmap`command that's added as part of the `importmap-rails` install to pin, unpin, or update npm packages in your import map. The binstub uses [`JSPM.org`](https://jspm.org/).
158
+
You can use the`./bin/importmap`command that's added as part of the `importmap-rails` install to pin, unpin, or update npm packages in your import map. The binstub uses [`JSPM.org`](https://jspm.org/).
159
159
160
160
It works like so:
161
161
@@ -212,7 +212,7 @@ Pinning "react" to https://ga.jspm.io/npm:[email protected]/dev.index.js
212
212
Pinning "object-assign" to https://ga.jspm.io/npm:[email protected]/index.js
213
213
```
214
214
215
-
You can also pick an alternative, supported CDN provider when pinning, like[`unpkg`](https://unpkg.com/) or [`jsdelivr`](https://www.jsdelivr.com/)([`jspm`](https://jspm.org/)is the default):
215
+
You can also pick an alternative, supported CDN provider when pinning, like[`unpkg`](https://unpkg.com/) or [`jsdelivr`](https://www.jsdelivr.com/)([`jspm`](https://jspm.org/)is the default):
216
216
217
217
```sh
218
218
./bin/importmap pin react --from jsdelivr
@@ -221,17 +221,17 @@ Pinning "react" to https://cdn.jsdelivr.net/npm/[email protected]/index.js
221
221
222
222
Remember, though, that if you switch a pin from one provider to another, you may have to clean up dependencies added by the first provider that isn't used by the second provider.
223
223
224
-
Run`./bin/importmap`to see all options.
224
+
Run`./bin/importmap`to see all options.
225
225
226
-
Note that this command is merely a convenience wrapper to resolving logical package names to CDN URLs. You can also just lookup the CDN URLs yourself, and then pin those. For example, if you wanted to use Skypack for React, you could just add the following to`config/importmap.rb`:
226
+
Note that this command is merely a convenience wrapper to resolving logical package names to CDN URLs. You can also just lookup the CDN URLs yourself, and then pin those. For example, if you wanted to use Skypack for React, you could just add the following to`config/importmap.rb`:
227
227
228
228
```ruby
229
229
pin "react", to:"https://cdn.skypack.dev/react"
230
230
```
231
231
232
232
### Preloading pinned modules
233
233
234
-
To avoid the waterfall effect where the browser has to load one file after another before it can get to the deepest nested import, importmap-rails supports[modulepreload links](https://developers.google.com/web/updates/2017/12/modulepreload). Pinned modules can be preloaded by appending`preload:true`to the pin.
234
+
To avoid the waterfall effect where the browser has to load one file after another before it can get to the deepest nested import, importmap-rails supports[modulepreload links](https://developers.google.com/web/updates/2017/12/modulepreload). Pinned modules can be preloaded by appending`preload:true`to the pin.
235
235
236
236
It's a good idea to preload libraries or frameworks that are used throughout your app, as this will tell the browser to download them sooner.
237
237
@@ -273,7 +273,7 @@ in the `app/assets` are never served directly in production.
273
273
274
274
### Manifest Files and Directives
275
275
276
-
When compiling assets with Sprockets, Sprockets needs to decide which top-level targets to compile, usually`application.css` and images. The top-level targets are defined in the Sprockets `manifest.js` file, by default it looks like this:
276
+
When compiling assets with Sprockets, Sprockets needs to decide which top-level targets to compile, usually`application.css` and images. The top-level targets are defined in the Sprockets `manifest.js` file, by default it looks like this:
277
277
278
278
```js
279
279
//= link_tree ../images
@@ -285,15 +285,15 @@ When compiling assets with Sprockets, Sprockets needs to decide which top-level
285
285
It contains _directives_ - instructions that tell Sprockets
286
286
which files to require in order to build a single CSS or JavaScript file.
287
287
288
-
This is meant to include the contents of all files found in the`./app/assets/images`directory or any subdirectories as well as any file recognized as JS directly at`./app/javascript` or `./vendor/javascript`.
288
+
This is meant to include the contents of all files found in the`./app/assets/images`directory or any subdirectories as well as any file recognized as JS directly at`./app/javascript` or `./vendor/javascript`.
289
289
290
-
It will load any CSS from the`./app/assets/stylesheets`directory (not including subdirectories). Assuming that you have `application.css` and `marketing.css` files in the `./app/assets/stylesheets` folder it will allow you to load those stylesheets with `<%= stylesheet_link_tag "application"%>` or `<%= stylesheet_link_tag "marketing"%>` from your views.
290
+
It will load any CSS from the`./app/assets/stylesheets`directory (not including subdirectories). Assuming that you have `application.css` and `marketing.css` files in the `./app/assets/stylesheets` folder it will allow you to load those stylesheets with `<%= stylesheet_link_tag "application"%>` or `<%= stylesheet_link_tag "marketing"%>` from your views.
291
291
292
292
You might notice that our JavaScript files aren't loaded from the `assets` directory by default, it's because `./app/javascript` is the default entry point for `importmap-rails` gem and the `vendor` folder is the place where downloaded JS packages would be stored.
293
293
294
294
In the `manifest.js` you could also specify the `link` directive to load a specific file instead of the whole directory. `link` directive requires providing explicit file extension.
295
295
296
-
Sprockets load the files specified, processes them if
296
+
Sprockets loads the files specified, processes them if
297
297
necessary, concatenates them into one single file, and then compresses them
298
298
(based on the value of `config.assets.css_compressor` or `config.assets.js_compressor`).
299
299
Compression reduces file size, enabling the browser to download the files faster.
@@ -344,7 +344,7 @@ For example, if you have a CSS library with many modules, which is stored in
344
344
the manifest for all files in this library. This file could include a list of
345
345
all the required files in order, or a simple `require_tree` directive.
346
346
347
-
It is also somewhat similar to the way that a file in`public/library_name/index.html`can be reached by a request to`/library_name`. This means that you cannot directly use an index file.
347
+
It is also somewhat similar to the way that a file in`public/library_name/index.html`can be reached by a request to`/library_name`. This means that you cannot directly use an index file.
348
348
349
349
The library as a whole can be accessed in the `.css` files like so:
350
350
@@ -1050,7 +1050,7 @@ We are aware that there are no one-size-fits-it-all solutions for the various Ja
1050
1050
1051
1051
### jsbundling-rails
1052
1052
1053
-
[`jsbundling-rails`](https://github.com/rails/jsbundling-rails) is a Node.js dependent alternative to the `importmap-rails` way of bundling JavaScript with[esbuild](https://esbuild.github.io/),[rollup.js](https://rollupjs.org/), or[Webpack](https://webpack.js.org/).
1053
+
[`jsbundling-rails`](https://github.com/rails/jsbundling-rails) is a Node.js dependent alternative to the `importmap-rails` way of bundling JavaScript with[esbuild](https://esbuild.github.io/),[rollup.js](https://rollupjs.org/), or[Webpack](https://webpack.js.org/).
1054
1054
1055
1055
The gem provides `yarn build --watch` process to automatically generate output in development. For production, it automatically hooks `javascript:build` task into `assets:precompile` task to ensure that all your package dependencies have been installed and JavaScript has been built for all entry points.
1056
1056
@@ -1060,17 +1060,17 @@ The gem provides `yarn build --watch` process to automatically generate output i
1060
1060
1061
1061
[`Webpacker`](webpacker.html) was the default JavaScript pre-processor and bundler for Rails 5 and 6. It has now been retired. A successor called [`shakapacker`](https://github.com/shakacode/shakapacker) exists, but is not maintained by the Rails team or project.
1062
1062
1063
-
Unlike other libraries in this list `webpacker`/`shakapacker` is completely independent of Sprockets and could process both JavaScript and CSS files. Read the [Webpacker guide](https://guides.rubyonrails.org/webpacker.html) to learn more.
1063
+
Unlike other libraries in this list `webpacker`/`shakapacker` is completely independent of Sprockets and could process both JavaScript and CSS files.
1064
1064
1065
1065
NOTE: Read the [Comparison with Webpacker](https://github.com/rails/jsbundling-rails/blob/main/docs/comparison_with_webpacker.md) document to understand the differences between `jsbundling-rails` and `webpacker`/`shakapacker`.
1066
1066
1067
1067
### cssbundling-rails
1068
1068
1069
-
[`cssbundling-rails`](https://github.com/rails/cssbundling-rails) allows bundling and processing of your CSS using[Tailwind CSS](https://tailwindcss.com/),[Bootstrap](https://getbootstrap.com/),[Bulma](https://bulma.io/),[PostCSS](https://postcss.org/), or[Dart Sass](https://sass-lang.com/), then delivers the CSS via the asset pipeline.
1069
+
[`cssbundling-rails`](https://github.com/rails/cssbundling-rails) allows bundling and processing of your CSS using[Tailwind CSS](https://tailwindcss.com/),[Bootstrap](https://getbootstrap.com/),[Bulma](https://bulma.io/),[PostCSS](https://postcss.org/), or[Dart Sass](https://sass-lang.com/), then delivers the CSS via the asset pipeline.
1070
1070
1071
1071
It works in a similar way to `jsbundling-rails` so adds the Node.js dependency to your application with `yarn build:css --watch` process to regenerate your stylesheets in development and hooks into `assets:precompile` task in production.
1072
1072
1073
-
**What's the difference between Sprockets?** Sprockets on their own is not able to transpile the Sass into CSS, Node.js is required to generate the `.css` files from your `.sass`files. Once the `.css` files are generated then `Sprockets` is able to deliver them to your clients.
1073
+
**What's the difference between Sprockets?** Sprockets on its own is not able to transpile the Sass into CSS, Node.js is required to generate the `.css` files from your `.sass`files. Once the `.css` files are generated then `Sprockets` is able to deliver them to your clients.
1074
1074
1075
1075
NOTE:`cssbundling-rails` relies on Node to process the CSS. The`dartsass-rails` and `tailwindcss-rails` gems use standalone versions of Tailwind CSS and Dart Sass, meaning no Nodedependency. If you are using `importmap-rails` to handle your Javascripts and `dartsass-rails` or `tailwindcss-rails`forCSS you could completely avoid the Node dependency resulting in a less complex solution.
0 commit comments