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

Question

I wish to precompile all the CSS and JS files in my project's app/assets folder. I do NOT want to precompile everything in vendor/assets or lib/assets, only the dependencies of my files as needed.

I tried the following wildcard setting, but it incorrectly precompiles everything. This results in lots of extra work and even causes a compilation failure when using bootstrap-sass.

config.assets.precompile += ['*.js', '*.css']

What is my best bet to only process my files in app/assets? Thanks!

possible duplicate of [How do I use config.assets.precompile for directories rather than single files?](http://stackoverflow.com/questions/12613980/how-do-i-use-config-assets-precompile-for-directories-rather-than-single-files) — Jason, Oct 16 '14 at 13:45

score 24 · Answer 1 · edited May 23 '17 at 12:10

24

config.assets.precompile = ['*.js', '*.css']

That will compile any JavaScript or CSS in your asset path, regardless of directory depth. Found via this answer.

edited May 23 '17 at 12:10

Community

1
1

answered Jan 31 '13 at 07:56

techpeace

2,606
1
22
21

4

Nope, it wont be going in to a deep folder. You must use ['your_inner_directory_name/*.js'] to compile the inner files – Rajesh Omanakuttan Jul 25 '13 at 04:58

score 22 · Answer 2 · answered Sep 24 '13 at 21:50

22

A slight tweak to techpeace's answer:

config.assets.precompile = ['*.js', '*.css', '**/*.js', '**/*.css']

I would've added a comment to his answer but I don't have enough reputation yet. Give me an upvote and I'll be there!

NOTE: this will also precompile all the CSS/JavaScript included via rubygems.

answered Sep 24 '13 at 21:50

eltiare

1,817
1
20
28

1

it's only `=` or `+=` ? – Jitendra Vyas Nov 13 '13 at 10:39
1

Sorry, didn't see this before. You can use either. If you want to add to the current options you will use +=. If you want to replace the options then just use =. – eltiare Apr 02 '14 at 19:31
1

you don't always want this because if you are using scss the subfolders are usually imported. Just the root level is usually enough. – Pencilcheck Apr 13 '15 at 01:21

score 20 · Accepted Answer · edited Jul 06 '16 at 15:59

This task is made more difficult by the fact that sprockets works with logical paths that do not include where the underlying, uncompiled resourced is located.

Suppose my project has the JS file "/app/assets/javascripts/foo/bar.js.coffee".

The sprockets compiler will first determine the output file extension, in this case ".js", and then the evaluate whether or not to compile the logical path "foo/bar.js". The uncompiled resource could be in "app/assets/javascripts", "vendor/assets/javascripts", "lib/assets/javascripts" or a gem, so there is no way to include/exclude a particular file based on the logical path alone.

To determine where the underlying resource is located, I believe it is necessary to ask the sprockets environment (available via the object Rails.application.assets) to resolve the real path of the resource given the logical path.

Here is the solution that I am using. I am fairly new to Ruby so this is not the most elegant code:

# 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 "including asset: " + full_path
      true
    else
      puts "excluding asset: " + full_path
      false
    end
  else
    false
  end
}

With sprockets > 3.0, this will not work in production because Rails.application.assets will be nil (assuming default: config.assets.compile = false).

To workaround you replace the full_path assignment with:

@assets ||= Rails.application.assets || Sprockets::Railtie.build_environment(Rails.application)
full_path = @assets.resolve(path)

See also: https://github.com/rails/sprockets-rails/issues/237

if you are interested in blacklisting assets by Regex, see here: http://stackoverflow.com/a/34801799/770670 — Michael K Madison, Jan 17 '16 at 10:57
As of Rails 4 (or earlier) the second argument to the proc is `full_path`. E.g. `Proc.new { |logical_path, full_path|` — jbielick, Apr 14 '20 at 13:18

Michael Slade · Answer 4 · 2012-04-11T04:13:43.600

7

I found this in the rails code:

@assets.precompile               = [ Proc.new{ |path| !File.extname(path).in?(['.js', '.css']) },
                                     /(?:\/|\\|\A)application\.(css|js)$/ ]

Which is backed up with the rails guide:

The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files

This default is not reset if you use +=, so you need to override it with a = instead of +=. Note that, apparently, you can pass a Proc or a regex to precompile as well as an extension. I believe, if you want to preompile only files in the top level directory, you will have to create a regex like:

config.assets.precompile = [ /\A[^\/\\]+\.(ccs|js)$/i ]

edited Apr 11 '12 at 04:13

answered Apr 11 '12 at 04:06

Michael Slade

13,802
2
39
44

Michael I appreciate your response, which led me to the correct answer. I want to precompile every css/js file within the app/assets tree, not just in the top level directory. Unfortunately the path passed into the proc is a logical path that does not differentiate between app/assets, vendor/assets, lib/assets, etc., so more digging was needed. See my answer for solution used. – keithgaputis Apr 11 '12 at 16:17
Now I understand how to use REGEX in `Rails.application.config.assets.precompile` line. I have just searched the net for an hour to understand this. Not documented elsewhere. Thank you. – W.M. Mar 15 '17 at 20:07

score 6 · Answer 5 · answered Mar 06 '17 at 06:25

I'm revisiting this post at the year 2017.

Our product is still heavily using RoR, we've been continuously modifying our precompile configurations by appending Rails.application.config.assets.precompile as we're adding new modules. Recently I was trying to optimize this by adding a regex pattern, I found that the following glob pattern works:

Rails.application.config.assets.precompile += %w(**/bundle/*.js)

However I still need to exclude certain modules, so I tried hard to use regex instead of glob.

Until I looked into sprockets source code: https://github.com/rails/sprockets-rails/blob/master/lib/sprockets/railtie.rb#L108 , I found that they're already using regex:

app.config.assets.precompile +=
  [LOOSE_APP_ASSETS, /(?:\/|\\|\A)application\.(css|js)$/]

So I change my code into:

Rails.application.config.assets.precompile +=
  [/^((?!my_excluded_module)\w)*\/bundle\/\w*\.js$/]

Which works well.

score 3 · Answer 6 · answered Mar 16 '16 at 10:23

This will get all .css .scss and .js including all files in subdirectories.

js_prefix    = 'app/assets/javascripts/'
style_prefix = 'app/assets/stylesheets/'

javascripts = Dir["#{js_prefix}**/*.js"].map      { |x| x.gsub(js_prefix,    '') }
css         = Dir["#{style_prefix}**/*.css"].map  { |x| x.gsub(style_prefix, '') }
scss        = Dir["#{style_prefix}**/*.scss"].map { |x| x.gsub(style_prefix, '') }

Rails.application.config.assets.precompile = (javascripts + css + scss)

this was the most elegant although I used += instead of just = — Paul Brunache, Nov 20 '17 at 15:51

score 2 · Answer 7 · answered Mar 21 '13 at 22:41

I wanted all assets from both /app and /vendor to be compiled, except partials (which name starts from underscore _). So here is my version of an entry in application.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
    vendor_assets_path = Rails.root.join('vendor', 'assets').to_path

    if ((full_path.starts_with? app_assets_path) || (full_path.starts_with? vendor_assets_path)) && (!path.starts_with? '_')
      puts "\t" + full_path.slice(Rails.root.to_path.size..-1)
      true
    else
      false
    end
  else
    false
  end
}

Additionally it outputs list of files being compiled for debugging purposes...

This is the only one that worked for me, after spending a couple of days trying out all sorts of possible solutions. It works even with `datejs-rails` and `bootstrap-sass` gems (which would cause all sorts of problems with other solutions). — Alistair A. Israel, May 28 '13 at 02:14

score 1 · Answer 8 · edited Apr 29 '15 at 15:14

This snippet includes all js/css files, excluding gems, under: app/assets, vendor/assets, lib/assets, unless they are partial files (e.g. "_file.sass"). It also has a strategy for including assets from Gems which aren't included in every page.

    # These assets are from Gems which aren't included in every page.
    # So they must be included here
    # instead of in the application.js and css manifests.
    config.assets.precompile += %w(a-gem.css a-gem.js b-gem.js)

    # This block includes all js/css files, excluding gems,
    # under: app/assets, vendor/assets, lib/assets
    # unless they are partial files (e.g. "_file.sass")
    config.assets.precompile << Proc.new { |path|
      if path =~ /\.(css|js)\z/
        full_path = Rails.application.assets.resolve(path).to_path
        aps = %w( /app/assets /vendor/assets /lib/assets )
        if aps.any? {|ap| full_path.starts_with?("#{Rails.root}#{ap}")} &&
            !path.starts_with?('_')
          puts "\tIncluding: " + full_path.slice(Rails.root.to_path.size..-1)
          true
        else
          puts "\tExcluding: " + full_path
          false
        end
      else
        false
      end
    }

Although, you probably wouldn't want to do this since you'd likely be precompiling gem assets twice (basically anything that is already \=require'd in your application.js or css). This snippet includes all js/css files, including gems, under: app/assets, vendor/assets, lib/assets, unless they are partial files (e.g. "_file.sass")

# This block includes all js/css files, including gems, 
# under: app/assets, vendor/assets, lib/assets
# and excluding partial files (e.g. "_file.sass")
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(css|js)\z/
    full_path = Rails.application.assets.resolve(path).to_path
    asset_paths = %w( app/assets vendor/assets lib/assets)
    if (asset_paths.any? {|ap| full_path.include? ap}) && 
        !path.starts_with?('_')
      puts "\tIncluding: " + full_path
      true
    else
      puts "\tExcluding: " + full_path
      false
    end
  else
    false
  end
}

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

8 Answers8

Linked