{"id":13482982,"url":"https://github.com/rails/sprockets","last_synced_at":"2025-05-14T08:05:18.149Z","repository":{"id":28586830,"uuid":"32104924","full_name":"rails/sprockets","owner":"rails","description":"Rack-based asset packaging system","archived":false,"fork":false,"pushed_at":"2025-04-19T03:13:00.000Z","size":4685,"stargazers_count":963,"open_issues_count":94,"forks_count":796,"subscribers_count":44,"default_branch":"main","last_synced_at":"2025-05-07T07:18:48.918Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rails.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"MIT-LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-03-12T21:56:03.000Z","updated_at":"2025-05-01T04:22:57.000Z","dependencies_parsed_at":"2022-07-09T18:18:11.654Z","dependency_job_id":"e0e86955-76ef-40bd-ba4b-96d8aa62c129","html_url":"https://github.com/rails/sprockets","commit_stats":{"total_commits":2842,"total_committers":248,"mean_commits":"11.459677419354838","dds":"0.28676988036593953","last_synced_commit":"ceac1ce15b0145d5e0bfc1de6a0bf3513fa94aaf"},"previous_names":[],"tags_count":134,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rails%2Fsprockets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rails%2Fsprockets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rails%2Fsprockets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rails%2Fsprockets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rails","download_url":"https://codeload.github.com/rails/sprockets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252851314,"owners_count":21814117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:01:07.235Z","updated_at":"2025-05-14T08:05:18.127Z","avatar_url":"https://github.com/rails.png","language":"Ruby","readme":"# Sprockets: Rack-based asset packaging\n\nSprockets is a Ruby library for compiling and serving web assets.\nIt features declarative dependency management for JavaScript and CSS\nassets, as well as a powerful preprocessor pipeline that allows you to\nwrite assets in languages like CoffeeScript, Sass and SCSS.\n\n## Installation\n\nInstall Sprockets from RubyGems:\n\n``` sh\n$ gem install sprockets\n```\n\nOr include it in your project's `Gemfile` with Bundler:\n\n``` ruby\ngem 'sprockets', '~\u003e 4.0'\n```\n\n## Upgrading to Sprockets 4.x\n\nThese are the major features in Sprockets 4.x\n\n- Source Maps\n- Manifest.js\n- ES6 support\n- Deprecated processor interface in 3.x is removed in 4.x\n\nRead more about them by referencing [Upgrading document](UPGRADING.md)\n\n## Guides\n\nFor most people interested in using Sprockets, you will want to see the README below.\n\nIf you are a framework developer that is using Sprockets, see [Building an Asset Processing Framework](guides/building_an_asset_processing_framework.md).\n\nIf you are a library developer who is extending the functionality of Sprockets, see [Extending Sprockets](guides/extending_sprockets.md).\n\nIf you want to work on Sprockets or better understand how it works read [How Sprockets Works](guides/how_sprockets_works.md)\n\n## Behavior Overview\n\nYou can interact with Sprockets primarily through directives and file extensions. This section covers how to use each of these things, and the defaults that ship with Sprockets.\n\nSince you are likely using Sprockets through another framework (such as the [the Rails asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html)), there will be configuration options you can toggle that will change behavior such as what directories or files get compiled. For that documentation you should see your framework's documentation.\n\n#### Accessing Assets\n\nAssets in Sprockets are always referenced by their *logical path*.\n\nThe logical path is the path of the asset source file relative to its\ncontaining directory in the load path. For example, if your load path\ncontains the directory `app/assets/javascripts`:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eLogical path\u003c/th\u003e\n    \u003cth\u003eSource file on disk\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eapplication.js\u003c/td\u003e\n    \u003ctd\u003eapp/assets/javascripts/application.js\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003emodels/project.js\u003c/td\u003e\n    \u003ctd\u003eapp/assets/javascripts/models/project.js\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ehello.js\u003c/td\u003e\n    \u003ctd\u003eapp/assets/javascripts/hello.coffee\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e Note: For assets that are compiled or transpiled, you want to specify the extension that you want, not the extension on disk. For example we specified `hello.js` even if the file on disk is a coffeescript file, since the asset it will generate is javascript.\n\n### Directives\n\nDirectives are special comments in your asset file and the main way of interacting with processors. What kind of interactions? You can use these directives to tell Sprockets to load other files, or specify dependencies on other assets.\n\nFor example, let's say you have custom JavaScript that you've written. You put this javascript in a file called `beta.js`. The javascript makes heavy use of jQuery, so you need to load that before your code executes. You could add a `require` directive to the top of `beta.js`:\n\n```js\n//= require jquery\n\n$().ready({\n  // my custom code here\n})\n```\n\nThe directive processor understands comment blocks in three formats:\n\n``` css\n/* Multi-line comment blocks (CSS, SCSS, JavaScript)\n *= require foo\n */\n```\n\n``` js\n// Single-line comment blocks (SCSS, JavaScript)\n//= require foo\n```\n\n``` coffee\n# Single-line comment blocks (CoffeeScript)\n#= require foo\n```\n\n\u003e Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the \"header\" of the document it will not do anything, and won't raise any errors.\n\nHere is a list of the available directives:\n\n- [`require`](#require) - Add the contents of a file to current\n- [`require_self`](#require_self) - Change order of where current contents are concatenated to current\n- [`require_directory`](#require_directory) - Add contents of each file in a folder to current\n- [`require_tree`](#require_tree) - Add contents of all files in all directories in a path to current\n- [`link`](#link) - Make target file compile and be publicly available without adding contents to current\n- [`link_directory`](#link_directory) - Make target directory compile and be publicly available without adding contents to current\n- [`link_tree`](#link_tree) - Make target tree compile and be publicly available without adding contents to current\n- [`depend_on`](#depend_on) - Recompile current file if target has changed\n- [`depend_on_directory`](#depend_on_directory) - Recompile current file if any files in target directory has changed\n- [`stub`](#stub) - Ignore target file\n\nYou can see what each of these does below.\n\n### Specifying Processors through File Extensions\n\nSprockets uses the filename extensions to determine what processors to run on your file and in what order. For example if you have a file:\n\n```\napplication.scss\n```\n\nThen Sprockets will by default run the sass processor (which implements scss). The output file will be converted to css.\n\nYou can specify multiple processors by specifying multiple file extensions. For example you can use Ruby's [ERB template language](#invoking-ruby-with-erb) to embed content in your doc before running the sass processor. To accomplish this you would need to name your file\n\n```\napplication.scss.erb\n```\n\nProcessors are run from right to left (tail to head), so in the above example the processor associated with `erb` will be run before the processor associated with `scss` extension.\n\nFor a description of the processors that Sprockets has by default see the \"default processors\" section below. Other libraries may register additional processors.\n\nWhen \"asking\" for a compiled file, you always ask for the extension you want. For example if you're using Rails, to get the contents of `application.scss.erb` you would use\n\n```\nasset_path(\"application.css\")\n```\n\nSprockets understands that `application.scss.erb` will compile down to a `application.css`. Ask for what you need, not what you have.\n\nIf this isn't working like you expect, make sure you didn't typo an extension, and make sure the file is on a \"load path\" (see framework docs for adding new load paths).\n\n## File Order Processing\n\nBy default files are processed in alphabetical order. This behavior can impact your asset compilation when one asset needs to be loaded before another.\n\nFor example if you have an `application.js` and it loads another directory\n\n```js\n//= require_directory my_javascript\n```\n\nThe files in that directory will be loaded in alphabetical order. If the directory looks like this:\n\n```sh\n$ ls -1 my_javascript/\n\nalpha.js\nbeta.js\njquery.js\n```\n\nThen `alpha.js` will be loaded before either of the other two. This can be a problem if `alpha.js` uses jquery. For this reason it is not recommend to use `require_directory` with files that are ordering dependent. You can either require individual files manually:\n\n```js\n//= require jquery\n//= require alpha\n//= require beta\n```\n\nOr you can use index files to proxy your folders.\n\n### Index files are proxies for folders\n\nIn Sprockets index files such as `index.js` or `index.css` files inside of a folder will generate a file with the folder's name. So if you have a `foo/index.js` file it will compile down to `foo.js`. This is similar to NPM's behavior of using [folders as modules](https://nodejs.org/api/modules.html#modules_folders_as_modules). It is also somewhat similar to the way that a file in `public/my_folder/index.html` can be reached by a request to `/my_folder`. This means that you cannot directly use an index file. For example this would not work:\n\n```erb\n\u003c%= asset_path(\"foo/index.js\") %\u003e\n```\n\nInstead you would need to use:\n\n```erb\n\u003c%= asset_path(\"foo.js\") %\u003e\n```\n\nWhy would you want to use this behavior?  It is common behavior where you might want to include an entire directory of files in a top level JavaScript. You can do this in Sprockets using `require_tree .`\n\n```js\n//= require_tree .\n```\n\nThis has the problem that files are required alphabetically. If your directory has `jquery-ui.js` and `jquery.min.js` then Sprockets will require `jquery-ui.js` before `jquery` is required which won't work (because jquery-ui depends on jquery). Previously the only way to get the correct ordering would be to rename your files, something like `0-jquery-ui.js`. Instead of doing that you can use an index file.\n\nFor example, if you have an `application.js` and want all the files in the `foo/` folder you could do this:\n\n```js\n//= require foo.js\n```\n\nThen create a file `foo/index.js` that requires all the files in that folder in any order you want using relative references:\n\n```js\n//= require ./foo.min.js\n//= require ./foo-ui.js\n```\n\nNow in your `application.js` will correctly load the `foo.min.js` before `foo-ui.js`. If you used `require_tree` it would not work correctly.\n\n## Cache\n\nCompiling assets is slow. It requires a lot of disk use to pull assets off of hard drives, a lot of RAM to manipulate those files in memory, and a lot of CPU for compilation operations. Because of this Sprockets has a cache to speed up asset compilation times. That's the good news. The bad news, is that sprockets has a cache and if you've found a bug it's likely going to involve the cache.\n\nBy default Sprockets uses the file system to cache assets. It makes sense that Sprockets does not want to generate assets that already exist on disk in `public/assets`, what might not be as intuitive is that Sprockets needs to cache \"partial\" assets.\n\nFor example if you have an `application.js` and it is made up of `a.js`, `b.js`, all the way to `z.js`\n\n```js\n//= require a.js\n//= require b.js\n# ...\n//= require z.js\n```\n\nThe first time this file is compiled the `application.js` output will be written to disk, but also intermediary compiled files for `a.js` etc. will be written to the cache directory (usually `tmp/cache/assets`).\n\nSo, if `b.js` changes it will get recompiled. However instead of having to recompile the other files from `a.js` to `z.js` since they did not change, we can use the prior intermediary files stored in the cached values . If these files were expensive to generate, then this \"partial\" asset cache strategy can save a lot of time.\n\nDirectives such as `require`, `link`, `depend_on`, and `depend_on_directory` tell Sprockets what assets need to be re-compiled when a file changes. Files are considered \"fresh\" based on their mtime on disk and a combination of cache keys.\n\nOn Rails you can force a \"clean\" install by clearing the `public/assets` and `tmp/cache/assets` directories.\n\n\n## Default Directives\n\nDirectives take a path or a path to a file. Paths for directive can be relative to the current file, for example:\n\n```js\n//= require ../foo.js\n```\n\nThis would load the file up one directory and named `foo.js`. However this isn't required if `foo.js` is on one of Sprocket's load paths. You can simply use\n\n```js\n//= require foo.js\n```\n\nWithout any prepended dots and sprockets will search for the asset. If the asset is on a sub-path of the load path, you can specify it without using a relative path as well:\n\n```js\n//= require sub/path/foo.js\n```\n\nYou can also use an absolute path, but this is discouraged unless you know the directory structure of every machine you plan on running code on.\n\nBelow is a section for each of the built in directive types supported by Sprockets.\n\n### require\n\n`require` *path* inserts the contents of the asset source file\nspecified by *path*. If the file is required multiple times, it will\nappear in the bundle only once.\n\n**Example:**\n\nIf you've got an `a.js`:\n\n```js\nvar a = \"A\";\n```\n\nand a `b.js`;\n\n```js\nvar b = \"B\";\n```\n\nThen you could require both of these in an `application.js`\n\n```js\n//= require a.js\n//= require b.js\n```\n\nWhich would generate one concatenated file:\n\n```js\nvar a = \"A\";\nvar b = \"B\";\n```\n\n### require_self\n\n`require_self` tells Sprockets to insert the body of the current\nsource file before any subsequent `require` directives.\n\n**Example:**\n\nIf you've got an `a.js`:\n\n```js\nvar a = \"A\";\n```\n\nAnd an `application.js`\n\n```js\n//= require_self\n//= require 'a.js'\n\nvar app_name = \"Sprockets\";\n```\n\nThen this will take the contents of `application.js` (that come after the last require) and put them at the beginning of the file:\n\n```js\nvar app_name = \"Sprockets\";\nvar a = \"A\";\n```\n\n### require_directory\n\n`require_directory` *path* requires all source files of the same\nformat in the directory specified by *path*. Files are required in\nalphabetical order.\n\n**Example:**\n\nIf we've got a directory called `alphabet` with an `a.js` and `b.js` files like before, then our `application.js`\n\n```js\n//= require_directory alphabet\n```\n\nWould produce:\n\n```js\nvar a = \"A\";\nvar b = \"B\";\n```\n\nYou can also see [Index files are proxies for folders](#index-files-are-proxies-for-folders) for another method of organizing folders that will give you more control.\n\n### require_tree\n\n`require_tree` *path* works like `require_directory`, but operates\nrecursively to require all files in all subdirectories of the\ndirectory specified by *path*.\n\n### link\n\n`link` *path* declares a dependency on the target *path* and adds it to a list\nof subdependencies to be compiled when the asset is written out to\ndisk.\n\nExample:\n\nIf you've got a `manifest.js` file and you want to specify that a `admin.js` source file should be\ngenerated and made available to the public you can link it by including this in the `manifest.js` file:\n\n```\n//= link admin.js\n```\n\nThe argument to `link` is a _logical path_, that is it will be resolved according to the\nconfigured asset load paths. See [Accessing Assets](#accessing-assets) above. A path relative to\nthe current file won't work, it must be a logical path.\n\n**Caution**: the \"link\" directive should always have an explicit extension on the end.\n\n`link` can also be used to include manifest files from mounted Rails engines:\n\n```\n//= link my_engine_manifest\n```\n\nThis would find a manifest file at `my_engine/app/assets/config/my_engine_manifest.js` and include its directives.\n\n### link_directory\n\n`link_directory` *path* links all the files inside the directory specified by the *path*. By \"link\", we mean they are specified as compilation targets to be written out to disk, and made available to be served to user-agents.\n\nFiles in subdirectories will not be linked (Compare to [link_tree](#link_tree)).\n\nThe *path* argument to `link_directory` is _not_ a logical path (it does not use the asset load paths), but is a path relative to the file the `link_directory` directive is found in, and can use `..` to  . For instance, you might want:\n\n```js\n//= link_directory ../stylesheets\n```\n\n`link_directory` can take an optional second argument with an extension or content-type, with the\ntwo arguments separated by a space:\n\n```js\n//= link_directory ../stylesheets text/css\n//= link_directory ../more_stylesheets .css\n```\n\nThis will limit the matching files to link to only files recognized as that type. An extension is\njust a shortcut for the type referenced, it does not need to match the source file exactly, but\ninstead identifies the content-type the source file must be recognized as.\n\n### link_tree\n\n`link_tree` *path* works like [link_directory](#link_directory), but operates\nrecursively to link all files in all subdirectories of the\ndirectory specified by *path*.\n\nExample:\n\n```js\n//= link_tree ./path/to/folder\n```\n\nLike `link_directory`, the argument is path relative to the current file, it is *not* a 'logical path' tresolved against load paths.\n\n\nAs with `link_directory`, you can also specify a second argument -- separated by a space --  so any extra files not matching the content-type specified will be ignored:\n\n```js\n//= link_tree ./path/to/folder text/javascript\n//= link_tree ./path/to/other_folder .js\n```\n\n\n### depend_on\n\n`depend_on` *path* declares a dependency on the given *path* without\nincluding it in the bundle. This is useful when you need to expire an\nasset's cache in response to a change in another file.\n\n**Example:**\n\nIf you have a file such as `bar.data` and you're using data from that file in another file, then\nyou need to tell sprockets that it needs to re-compile the file if `bar.data` changes:\n\n```js\n//= depend_on \"bar.data\"\n\nvar bar = '\u003c%= File.read(\"bar.data\") %\u003e'\n```\n\nTo depend on an entire directory containing multiple files, use `depend_on_directory`\n\n### depend_on_asset\n\n`depend_on_asset` *path* works like `depend_on`, but operates\nrecursively reading the file and following the directives found. This is automatically implied if you use `link`, so consider if it just makes sense using `link` instead of `depend_on_asset`.\n\n### depend_on_directory\n\n`depend_on_directory` *path* declares all files in the given *path* without\nincluding them in the bundle. This is useful when you need to expire an\nasset's cache in response to a change in multiple files in a single directory.\n\nAll paths are relative to your declaration and must begin with `./`\n\nAlso, your must include these directories in your [load path](guides/building_an_asset_processing_framework.md#the-load-path).\n\n**Example:**\n\nIf we've got a directory called `data` with files `a.data` and `b.data`\n\n```\n// ./data/a.data\nA\n```\n\n```\n// ./data/b.data\nB\n```\n\n```\n// ./file.js.erb\n//= depend_on_directory ./data\nvar a = '\u003c% File.read('data/a.data') %\u003e'\nvar b = '\u003c% File.read('data/b.data') %\u003e'\n```\n\nWould produce:\n\n```js\nvar a = \"A\";\nvar b = \"B\";\n```\n\nYou can also see [Index files are proxies for folders](#index-files-are-proxies-for-folders) for another method of organizing folders that will give you more control.\n\n### stub\n\n`stub` *path* excludes that asset and its dependencies from the asset bundle.\nThe *path* must be a valid asset and may or may not already be part\nof the bundle. `stub` should only be used at the top level bundle, not\nwithin any subdependencies.\n\n### Invoking Ruby with ERB\n\nSprockets provides an ERB engine for preprocessing assets using\nembedded Ruby code. Append `.erb` to a CSS or JavaScript asset's\nfilename to enable the ERB engine.\n\nFor example if you have an `app/application/javascripts/app_name.js.erb`\nyou could have this in the template\n\n```js\nvar app_name = \"\u003c%= ENV['APP_NAME'] %\u003e\";\n```\n\nGenerated files are cached. If you're using an `ENV` var then\nwhen you change then ENV var the asset will be forced to\nrecompile. This behavior is only true for environment variables,\nif you are pulling a value from somewhere else, such as a database,\nyou must manually invalidate the cache to see the change.\n\nIf you're using Rails, there are helpers you can use such as `asset_url`\nthat will cause a recompile if the value changes.\n\nFor example if you have this in your `application.css`\n\n``` css\n.logo {\n  background: url(\u003c%= asset_url(\"logo.png\") %\u003e)\n}\n```\n\nWhen you modify the `logo.png` on disk, it will force `application.css` to be\nrecompiled so that the fingerprint will be correct in the generated asset.\n\nYou can manually make sprockets depend on any other file that is generated\nby sprockets by using the `depend_on` or `depend_on_directory` directive. Rails\nimplements the above feature by auto calling `depend_on` on the original asset\nwhen the `asset_url` is used inside of an asset.\n\n### Styling with Sass and SCSS\n\n[Sass](http://sass-lang.com/) is a language that compiles to CSS and\nadds features like nested rules, variables, mixins and selector\ninheritance.\n\nIf the `sass` gem is available to your application, you can use Sass\nto write CSS assets in Sprockets.\n\nSprockets supports both Sass syntaxes. For the original\nwhitespace-sensitive syntax, use the extension `.sass`. For the\nnew SCSS syntax, use the extension `.scss`.\n\nIn Rails if you have `app/application/stylesheets/foo.scss` it can\nbe referenced with `\u003c%= asset_path(\"foo.css\") %\u003e`. When referencing\nan asset in Rails, always specify the extension you want. Sprockets will\nconvert `foo.scss` to `foo.css`.\n\n### Scripting with CoffeeScript\n\n[CoffeeScript](http://jashkenas.github.io/coffeescript/) is a\nlanguage that compiles to the \"good parts\" of JavaScript, featuring a\ncleaner syntax with array comprehensions, classes, and function\nbinding.\n\nIf the `coffee-script` gem is available to your application, you can\nuse CoffeeScript to write JavaScript assets in Sprockets. Note that\nthe CoffeeScript compiler is written in JavaScript, and you will need\nan [ExecJS](https://github.com/rails/execjs)-supported runtime\non your system to invoke it.\n\nTo write JavaScript assets with CoffeeScript, use the extension\n`.coffee`.\n\nIn Rails if you have `app/application/javascripts/foo.coffee` it can\nbe referenced with `\u003c%= asset_path(\"foo.js\") %\u003e`. When referencing\nan asset in Rails, always specify the extension you want. Sprockets will\nconvert `foo.coffee` to `foo.js`.\n\n\n## ES6 Support\n\nSprockets 4 ships with a Babel processor. This allows you to transpile ECMAScript6 to JavaScript just like you would transpile CoffeeScript to JavaScript. To use this, modify your Gemfile:\n\n```ruby\ngem 'babel-transpiler'\n```\n\nAny asset with the extension `es6` will be treated as an ES6 file:\n\n```es6\n// app/assets/javascript/application.es6\n\nvar square = (n) =\u003e n * n\n\nconsole.log(square);\n```\n\nStart a Rails server in development mode and visit `localhost:3000/assets/application.js`, and this asset will be transpiled to JavaScript:\n\n```js\nvar square = function square(n) {\n  return n * n;\n};\n\nconsole.log(square);\n```\n\n\n### JavaScript Templating with EJS and Eco\n\nSprockets supports *JavaScript templates* for client-side rendering of\nstrings or markup. JavaScript templates have the special format\nextension `.jst` and are compiled to JavaScript functions.\n\nWhen loaded, a JavaScript template function can be accessed by its\nlogical path as a property on the global `JST` object. Invoke a\ntemplate function to render the template as a string. The resulting\nstring can then be inserted into the DOM.\n\n```\n\u003c!-- templates/hello.jst.ejs --\u003e\n\u003cdiv\u003eHello, \u003cspan\u003e\u003c%= name %\u003e\u003c/span\u003e!\u003c/div\u003e\n\n// application.js\n//= require templates/hello\n$(\"#hello\").html(JST[\"templates/hello\"]({ name: \"Sam\" }));\n```\n\nSprockets supports two JavaScript template languages:\n[EJS](https://github.com/sstephenson/ruby-ejs), for embedded\nJavaScript, and [Eco](https://github.com/sstephenson/ruby-eco), for\nembedded CoffeeScript. Both languages use the familiar `\u003c% … %\u003e`\nsyntax for embedding logic in templates.\n\nIf the `ejs` gem is available to your application, you can use EJS\ntemplates in Sprockets. EJS templates have the extension `.jst.ejs`.\n\nIf the `eco` gem is available to your application, you can use [Eco\ntemplates](https://github.com/sstephenson/eco) in Sprockets. Eco\ntemplates have the extension `.jst.eco`. Note that the `eco` gem\ndepends on the CoffeeScript compiler, so the same caveats apply as\noutlined above for the CoffeeScript engine.\n\n### Minifying Assets\n\nSeveral JavaScript and CSS minifiers are available through shorthand.\n\nIn Rails you will specify them with:\n\n```ruby\nconfig.assets.js_compressor  = :terser\nconfig.assets.css_compressor = :scss\n```\n\nIf you're not using Rails, configure this directly on the \"environment\".\n\n``` ruby\nenvironment.js_compressor  = :terser\nenvironment.css_compressor = :scss\n```\n\nIf you are using Sprockets directly with a Rack app, don't forget to add\nthe `terser` and `sass` gems to your Gemfile when using above options.\n\n### Gzip\n\nBy default when Sprockets generates a compiled asset file it will also produce a gzipped copy of that file. Sprockets only gzips non-binary files such as CSS, javascript, and SVG files.\n\nFor example if Sprockets is generating\n\n```\napplication-12345.css\n```\n\nThen it will also generate a compressed copy in\n\n```\napplication-12345.css.gz\n```\n\nThis behavior can be disabled, refer to your framework specific documentation.\n\n### Serving Assets\n\nIn production you should generate your assets to a directory on disk and serve them either via Nginx or a feature like Rail's `config.public_file_server.enabled = true`.\n\nOn Rails you can generate assets by running:\n\n```term\n$ RAILS_ENV=production rake assets:precompile\n```\n\nIn development Rails will serve assets from `Sprockets::Server`.\n\n## Contributing to Sprockets\n\nSprockets is the work of hundreds of contributors. You're encouraged to submit pull requests, propose\nfeatures and discuss issues.\n\nSee [CONTRIBUTING](CONTRIBUTING.md).\n\n### Version History\n\nPlease see the [CHANGELOG](https://github.com/rails/sprockets/tree/master/CHANGELOG.md)\n\n## License\nSprockets is released under the [MIT License](MIT-LICENSE).\n","funding_links":[],"categories":["Ruby","Middlewares","Assets","Gems"],"sub_categories":["Articles"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frails%2Fsprockets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frails%2Fsprockets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frails%2Fsprockets/lists"}