In my rails application I have 3 layouts for different users. Every layout having some javascript and css files included in it.
I can't use following line in my application.js or application.css file
//= require_tree . or *= require_tree .
When I pre-compile all my js and css every thing is get disturbed in my site.
But I want to compile all my js and css files but compiling then together not working. Because when I compile all css files together then some of my classes are get override by other classes.
Even while pre compiling my assets its not giving me any error.
or I can only include those files in application.js or application.css which are common in 3 layouts. like this
//= require jquery-1.8.3
//= require jquery-migrate-1.0.0.js
//= require jquery-ui.js
But what if I to want pre compile my other js or css files which are not common in layouts?
Any Solution?
In config/environments/production.rb you can set, what do you want to precompile
config.assets.precompile << %w(admin.js admin.css user.js user.css)
From whatever i can get i think you want to have a different layout for different users. what you should do is remove require tree from your application.css and application.js files and require all the files which you want to have in your entire app and then for specific users you can simply render that layout
Related
I've added the webpacker gem, bundled, installed and edited all my javascript_include tags to javascript_pack.
What happens with the existing javascript? I have lots of it under app/assets/javascripts and vendor/assets/javascripts. It doesn't seem to pick it up automatically.
Some of this javascript is required into application.js.erb and some other files load directly into various parts of the application, eg:
app/assets/javascripts/application.js.erb # linked to from application layout
//= require global
//= require bootstrap
//= require moment
//= require websockets
//= require init
Then I also have:
app/assets/javascripts/users.js
//= require table
//= require form
//= require sync
//= require controllers/users/index
Some of these files are small Vue apps, I've placed their templates under Rails views. Now after this webpacker business I have app/assets/javascripts (which contains all my actual code but is ignored), then app/javascript which I don't know what it is, and app/javascripts where I'm supposed to put my Vue apps. Or the other way around. Or something.
How do I get all this to work with webpacker? None of the tutorials I've found cover migrating existing code to webpacker and to be honest I don't understand much from all those javascript snippets they just dump there but don't explain what it actually does and how.
By default, adding webpack doesn't change anything. For example, if you leave javascript_include_tag 'application' in your layout, it will continue to work the same as it did before adding webpack.
The files in the javascript/packs folder are entry points for javascript. If you are doing a single page app, you will likely have a single pack like application.js which boots up your entire application. If you are doing a conventional app, you will likely have a main application.js file that loads all global scripts, plus other page or component level scripts like settings.js or calendar.js. These scripts are loaded with javascript_pack_tag 'application'.
If you move your files out of the assets folder into the javascript folder you can then add them to your pack file like so:
import 'global';
window.$ = window.jQuery = require('jquery');
import 'bootstrap';
import 'moment';
import 'websockets';
window.addEventListener('DOMContentLoaded', (event) => {
console.log('do init stuff here');
// use bootstrap here
});
I have one problem I have to call assets (Javascripts , stylesheets and images) from other folders apart from the application default assets folder, I don't have any idea how to call it.
I have tried append_view_path function but did not solve my problem, here is the link
http://api.rubyonrails.org/classes/ActionController/Metal.html#method-i-location-3D
Can anyone suggest the best way to load assets.
I think you will placed you js and css file in public folder in the assets folder then require in the application.js and application.css like :
application.js
//= require app
application.css
*= require dist/css/skins/skin-blue.min.css
Firstly, I have the following sprocket directories set up:
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
application.css
*= require_self
*= require_tree .
However, a simple test file in vendor,
console.log('I\'ve been loaded,baby!');
is not loaded by sprockets? If I move it into app/assets/js is works then, but not in vendor. What directives do I need to set up in order for this to work? Do they have to be required individually?
Do I need to precompile even in development?
Also, there is no images directory in vendor. Many third party scripts have demo images with them. I would actually prefer to them in vendor/images rather than app/assets/images. Can this be setup?
As per Rails Guides
Pipeline assets can be placed inside an application in one of three
locations: app/assets, lib/assets or vendor/assets
Make sure that you are placing the assets in one of the locations mentioned above.
To answer your queries:
If I move it into app/assets/js is works then, but not in vendor.
It works there because of the require_tree directive specified in application.js which loads all the javascript files present in current directory (of application.js) i.e., app/assets/javascripts
//= require_tree .
The above directive doesn't load the javascript files from vendor/assets/javascripts which is why it doesn't work in vendor.
What directives do I need to set up in order for this to work? Do they have to be required individually?
Yes, you would have to require them in application.js explicitly.
Suppose, you have vendor/javascripts/abc_vendor.js and vendor/stylesheets/abc_vendor.css
then in application.js you will have to add
//= require abc_vendor
and in application.css
*= require abc_vendor
Many third party scripts have demo images with them. I would actually prefer to them in vendor/images rather than app/assets/images. Can
this be setup?
Yes. It can be setup. Just create the folder images in vendor/assets directory. Add the vendor images in that folder. Suppose you added abc_logo.jpg in vendor/assets/images directory. Restart the server. And access the image as:
<%= image_tag "abc_logo.jpg" %>
Is it possible, using the asset pipeline on production, to seperate the minifcaiton & concatenation of js & css?
I want to have my css pre-compiled, but I'd like to leave my js files as they are in development.
In your application.js file you can remove the line:
//= require_tree .
Which causes the asset pipeline to ignore your individual javascript files for concentration.
You can manually add any file you wish to be included in the application.js file instead.
Man, WTH is going on with this stuff. You know what that line actually does in Rails 3.1?
<script src="/assets/defaults.js" type="text/javascript"></script>
As they say on ESPN, "Come on, man."
I know that assets are no longer treated as second-class citizens. But it seems as if they are unable to even receive a green card in this release candidate. In the new app/assets/javascripts/application.js:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
Sooooo. Am I supposed to download jquery? What do I do? Because there's nothing in that javascripts directory except application.js.
Aggravating. And yet it's free, so how am I complaining? Anyway, these issues seem pretty basic, but I would appreciate any help you can offer.
In Rails 3.1 there is no longer a "defaults" as such, but rather what is specified in your application.js file are the "defaults". You would include this file using this line:
javascript_include_tag "application"
The jquery and jquery_ujs files come with the jquery-rails gem which is in the default Rails 3.1 Gemfile.
The //= require line in that file tells Sprockets that you want to require a file which in this case would be jquery.js from within jquery-rails, where the //= require_tree . will require all other JavaScript files in the same directory as application.js and concatenate them all into one file.
You can read more about the asset pipeline here.