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" %>
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
});
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
When using asset pipeline in rails 3.1, it creates a default application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
but when will I need include all of my javascript? In most cases we use different javascrips for different controllers/views?
require_tree . will result in you having a single file (application.js in this case) holding all your scripts that is there in the folder. And the fact that browsers will only pull that file once from your web server (unless you do a Ctrl + R refresh or there is a change in file cache property), does make the apps behave faster for subsequent requests.
Unless of course you have an application that have quite varying and huge scripts and a typical user is not expected to move around much that he wouldn't need majority of those. Which obviously is not very common case.
for additional and detailed information. look here
http://guides.rubyonrails.org/asset_pipeline.html
Browser loads application.js once and then gets it from cache.
//= require_tree . loads the every file or sub folder file within the javascript directory
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.
I have just upgraded to Rails 3.1, and I am having an issue with loading my Javascripts with the new asset pipeline.
I have copied the js files (both the files themselves and their .min variants) into my /app/assets/javascripts directory, and my application.js manifest is as follows:
//= require jquery
//= require jquery_ujs
//= require jquery-easytabs
//= require jquery-hashchange.min
//= require_tree .
But this does not appear to be working; Easytabs is not being loaded correctly. Strangely, when I look in the console at the application.js file that is compiled, I can see the Easytabs code, but it is not working.
I have found that if i paste the code directly into the application.js file, it works as expected, so I know that the script is working. This is not, however, the intended use of the application.js file.
I would appreciate any guidance on where to go next in order to ensure the correct loading of the js files.
Thanks!
Try moving all your plugins (like easytabs) into the vendor directory.
vendor/assets/javascripts/
Then change your application.js file to this:
//= require jquery
//= require jquery_ujs
//= require_tree ../../../vendor/assets/javascripts
//= require_tree .
You should (if you aks me) only place code that you have written for a specific controller in your app/assets/javascripts directory, everything else, like plugins should go in the vendors dir.
I managed to get to the bottom of this - it seems that the require order is alphabetical, so jquery_easytabs was getting compiled before jquery_ujs. I fixed this by renaming to jquery_zeasytabs - not the cleanest, but it does work.