Rails asset pipeline: how to create custom manifest file - ruby-on-rails

I am trying to make a custom manifest javascript file seperate from application.js. I've take the code from application.js and pasted it into a new file I've called "other_manifest.js" and placed in the assets/javascrips directory. Here is the code:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
In my assets.rb file, I've included the line:
Rails.application.config.assets.precompile += %w(other_manifest.js)
I precompile and clean the assets locally, and then when I run the page, all i get is the exact text from the manifest file. It is not bringing in any of the files. How do I create a custom manifest file?

Easily
You have application.js. Create a second file: other_manifest.js
Then in your layout layouts/application.html.erb (could be a different layout altogether):
<% if condition %>
<%= javascript_include_tag 'other_manifest' %>
<% else %>
<%= javascript_include_tag 'application' %>
<% end %>
And yes, you need to add in your config/initializers/assets.rb (followed by reboot):
Rails.application.config.assets.precompile += %w(other_manifest.js)
Also, make sure to remove the //= require_tree . from manifests. Because it will include ALL the javascript in the manifest (making having a different manifest pointless)

Related

Rails 5 assets pipeline not working as expected (Development)

am adding all my .js and .css files to precompile like this
Rails.application.config.assets.precompile = ['*.js', 'application.scss', '*.scss', '*.css.erb']
And including application.js in layout head section like this
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
even though some of the , js files not available at my views. I have a file called image-picker.js in that directory. which make a .imagepicker() function available at my views but it's throwing an error like this
Uncaught TypeError: $(...).imagepicker is not a function
But when i include that .js file for the page specifically using
<%= javascript_include_tag "image-picker" %>
it's working as expected. Why this is happening. Do I need to set anything else in the configuration? How to avoid including my assets at each page view??
Update
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require image-picker.js #tried but not working.
//= require_tree .
Update2
am using jquery-rails - 4.3.1 and jquery-ui-rails 6.0.1
which adding jquery-2.1.4.min.js to my assets. But when i use //= require jquery i think it's not including jquery to app.
When i tried adding it manually everything works properly,
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-2.1.4.min #now everything working fine. it seems a dependency problem.
//= require image-picker.js #tried but not working.
//= require_tree .
I would like to know what is the reason for this. thanks.
Very similar question you can find - here
try to add image-picker.js in application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require image-picker
//= require_tree .

Rails with Bootstrap (on Windows) - empty application.css file and styling won't load

Relevant part of GemFile:
Bundle install:
And still no effect:
From \app\views\layouts\application.html.erb:
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
How do I load Bootstrap styling?
Seems youre missing to import bootstrap styles. To solve this according to the bootstrap-sass documentation you should:
Import Bootstrap styles in app/assets/stylesheets/application.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
bootstrap-sprockets must be imported before bootstrap for the icon fonts to work.
Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead
First you should decide which gem to use, twitter-bootstrap-rails or bootstrap-sass, not both.
Let's say you use bootstrap-sass then in your application.js should be
//= require bootstrap-sprockets
not
//= require twitter/bootstrap
and then add
#import "bootstrap-sprockets";
#import "bootstrap";
to your app/assets/stylesheets/application.scss like R. Sierra said.
Now your app should be good to go!

Add all vendor files in Vendor

Is there a way to add all files in Vendor third party libraries with sepearate application.css and application.js file?
Can I just add those two files under Vendor folder and require_tree from there like below?
/*
*= require_tree assets/stylesheets/.
*/
Some say that I should include in app/assets/stylsheets/application.css file but I think there is another way like above.
You can do that with a little bit tweak
Sprockets uses files named index (with the relevant extensions) for a special purpose.
For example, if you have a jQuery library with many modules, which is stored in lib/assets/library_name, the file lib/assets/library_name/index.js serves as the manifest for all files in this library. This file could include a list of all the required files in order, or a simple require_tree directive http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives (See 2.2.2)
That is said, say your vendor CSS directory is vendor/assets/css/foo, with the following files
/foo
bar.css
baz.css
Then you can create a file foo/index.css with following content
/= require_tree ./
Then you can include this lib in your main application.css as
/= require foo
Disclaimer
I have not used the above technique by myself. I just followed the guide and made assumption.
I myself recommend require CSS one by one as order matters in CSS. Even the files are in vendor, you can require them directly in application.css like
/= require foo/bar
/= require foo/baz
Try putting this in your javascript file (vendor.js):
//= require_tree ../../../vendor/assets/javascripts/.
and this in your css file (vendor.css):
//= require_tree ../../../vendor/assets/stylesheets/.
You could put these in app/assets/stylesheets/vendor.css or app/assets/javascripts/vendor.js, and then include them in your _head.html.erb partial:
<%= stylesheet_link_tag "vendor", :media => "screen, projection" %>
<%= javascript_include_tag "vendor" %>
Make sure to add these to your assets to be precompiled as well (config/environments/production.rb):
config.assets.precompile += ['vendor.css', 'vendor.js']
Also, cool username! :D

What's the difference in changing application.js vs config.assets.precompile?

I'm studying assets precompile and I'm confused.
Let' say I created a new application like rails new dummy.
This is the generated app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
It says This is a manifest file that'll be compiled into application.js. It's still clear up to this point, but I found out that there's another configuration that we can set under config/application.rb: config.assets.precompile << \some_regex\.
Now I'm unclear what's the difference between changing application.js vs config.assets.precompile for selecting what to be compiled.
I feel like I'm missing the bigger picture here, can someone help to explain this?
The application.js file is for Javascript, as the name suggests. Because of the lines below in the file, jquery, jquery_ujs, turbolinks javascript library, and every Javascript files in your /app/assets/javascripts folder will be pre-compiled.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
You can use the "config.assets.precompile" to add other things to be pre-compiled such as font files and other files that are not recognized by Rails by default. You can use it to include javascript files as well. But, such needs are rare.
An example of it would be....
config.assets.precompile += %w( .svg .eot .woff .ttf )
I hope this makes sense.

Is there a way to include everything that's in /assets/javascripts?

As it says on the tin. It seems like javascript_include_tag :all includes /assets/all.js instead of all of them.
Is there a way to just include everything there plus all the subfolders?
Why don't you just use the default generated application.js ?
/app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
Take a note on the last line: //= require_tree . That should include all your javascript.
/app/view/layouts/application.html.erb
<%= javascript_include_tag "application" %>
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
The require_tree directive tells Sprockets to recursively include all
JavaScript files in the specified directory into the output. These
paths must be specified relative to the manifest file. You can also
use the require_directory directive which includes all JavaScript
files only in the directory specified, without recursion.

Resources