How do I use config.assets.precompile for directories rather than single files?

Question

How do I use config.assets.precompile in production to only include the files in 'lib/assets/javascripts', 'lib/assets/stylesheets', 'vendor/assets/javascripts' and 'vendor/assets/stylesheets'?

Basically something like:

config.assets.precompile += %w( pagespecific.js anotherpage.js )

But used to auto include files in specific directories that are not 'app/assets/javascripts' or 'app/assets/stylesheets'.

*edit: adding the solution I ended up using for page specific js

config.assets.precompile += ['pages/*.js']

score 31 · Accepted Answer · edited Dec 08 '14 at 21:23

31

You can simply write it like this:

config.assets.precompile += ['directory/*']

edited Dec 08 '14 at 21:23

Abram

39,950
26
134
184

answered Sep 27 '12 at 05:18

zolter

7,070
3
37
51

Wow, looks pretty simple :] I'll test it out later today. Thanks! – eddywashere Sep 27 '12 at 13:18
1

Thanks again! The example I used was a pages directory. `config.assets.precompile += ['pages/*.js']` which will work as long as that pages directory is within any of paths that are part of config.assets.paths. (like /lib/assets/javascripts) – eddywashere Oct 01 '12 at 03:42
My app seems to ignore this for some reason, is there any chance you can disable 'adding' directories to precompilation? I'm looking in public/assets and the precompiled file(s) are not there – Abe Petrillo Aug 14 '13 at 15:56

Mars · Answer 2 · 2012-09-29T21:33:22.730

The point of compiling assets is to build one (or a small number of) files to minimize the number of HTTP requests from the browser.

If you're going to serve each file individually, then why not just disable precompile?

To use precompile as intended, build an entire directory into one file using Sprockets' require_directory:

//= require_directory ./awesome_js_app

...and list that file in your config.assets.precompile array.

By default, all CSS is built into application.css & JS into application.js. You can add more top-level files to compile with the precompile directive in config/environments/production.rb (and other envs if you wish.) For example:

config.assets.precompile += %w( public.css public.js )

Then the Sprockets //= require ... directives in those top-level files will determine the composition of final compiled file.

You can use these additional top-level files in your layouts to have different CSS & JS for certain views.

Thanks, I do want my application-wide styles and scripts in 1 awesomely packaged file to take advantage of the performance gains. I should have said I want to use page specific js and possibly css. Although I'd like to note that it is less of a pain to add classes on the body to for page specific css vs using js logic to determine if its on the right page. — eddywashere, Sep 27 '12 at 13:14

score 1 · Answer 3 · answered Oct 01 '14 at 07:26

It's probably a bit better to include this as an asset path(as per your example solution it would be):

config.assets.paths << Rails.root.join('app', 'assets', 'javascripts', 'pages')

It also allows you to include paths not in the assets directory (for example with including the bootstrap-sass). These paths are then added to your assets folder in your public directory, and pushed to your asset location if using something like asset_sync.

score 0 · Answer 4 · edited May 23 '17 at 11:54

I found this link, and think may be it helpful for you, please see

keithgaputis's answer. Rails config.assets.precompile setting to process all CSS and JS files in app/assets

I think you can do like following.

# In production.rb
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(css|js)\z/
    full_path = Rails.application.assets.resolve(path).to_path
    app_assets_path = Rails.root.join('app', 'assets').to_path
    if full_path.starts_with? app_assets_path
      puts "excluding asset: " + full_path
      false
    else
      puts "including asset: " + full_path
      true
    end
  else
    false
  end
}

score 0 · Answer 5 · answered Sep 05 '18 at 20:31

As of Sprockets 3 you can use a manifest.js file to declare which files or directories are precompiled. See upgrade docs. So in your config you would add:

config.assets.precompile = %w(manifest.js)

Then in app/assets/config/manifest.js you can have

//= link_directory ../pages .js

Use link_tree if you want js files in nested sub-directories to be precompiled too.

How do I use config.assets.precompile for directories rather than single files?

5 Answers5

Linked