I have read the documentation of Grails asset pipeline plugin so I started implementing it in a sample grails project built in 2.2.3. I installed the asset pipeline plugin version 1.7.1. My requirement is to include jquery.ui.min.js in my gsp file so I included by using the tag
<asset:javascript src="jquery-ui.min.js"/>.
Also, in my Config.groovy, I have made the following entry
grails.assets.bundle=true.
The problem which I am facing is that I'm unable to access the jquery.ui.min.js in my gsp file. Pease tell me what am I missing and how should I proceed with it as I could not get any valid solutions for my query??
I think you need to reference a different file:
<asset:javascript src="application.js"/>
And application.js contains:
//= require jquery-ui.min
at the top of the file (make sure there isn't any blank lines above that line, other comment lines are ok) to load your lib. See http://bertramdev.github.io/asset-pipeline/guide/usage.html#directives
This answer is a guess based on what Grails 2.4 gives me out of the box. FYI, the auto-generated application.js contains:
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//
//= require jquery
//= require_tree .
//= require_self
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 am trying to use asset pipeline and want to have more then one manifest file. At present i have application.css manifest file and admin_area.css manifest file. One of the stack answer suggested to remove application.css manifest, however it will not solve my intent.
Current Error msg:
Sprockets::CircularDependencyError in Authenticate#dashboard
projectfolder/app/assets/stylesheets/admin_area.css has already been required
My current rails version is : 4.1.5
And also please suggest solution to have more then one javascript manifest file.
thanks in advance.
If you have require_tree . directive in both your manifests - one of them tries to require another manifests, and another will try to require first, and it leads to circular error.
Instead you should explicitly require assets in your manifests.
Manifest file: If you look at docs, it says
Sprockets uses manifest files to determine which assets to include and serve. These manifest files contain directives - instructions that tell Sprockets which files to require in order to build a single CSS or JavaScript file
so in short rails asset pipeline precompile your all of your assets like css,js in single file(one file for all of your css files and one js file for all of your js). By doing this load time of your pages is significantly reduced because your browser makes fewer requests to get these files individually.
Having More than one manifest files:
In some cases like in your case or if you are making your app compatible with <= IE8 then you might want to have more than one manifest files as IE only allows a some fixed size of your styles and ignore your other styles
To achieve this you follow these steps:
a. Remove require_tree . from your application.css file because it will require all of your styles present in app/assets/stylesheets and hence you should require each file individually.
b. In case of Production you need to precompile your assets and for that you'll have to add your individual files by
#config/application.rb or config/environments/production.rb
Rails.application.config.assets.precompile += ['admin_area.css', 'other.css', 'some_file.js']
Your error:
Sprockets::CircularDependencyError in Authenticate#dashboard projectfolder/app/assets/stylesheets/admin_area.css has already been required
Your error clearly says you have a circular dependency meaning one of your files is trying to load resources of other and other one is trying to load resources of first one making a circular dependency. As #MikDiet already mentioned in his answer that you have require_tree . in both of your css files.
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.
I am using rails 3.2.12 and created a css file in assets/stylesheets/equipment.css to go along with a controller called equipment_controller.rb. This stylesheet isn't working. What do I need to do to get this included in the pipeline?
The file needs to be loaded into your application.css.
In your application.css file, you will either need to load the file manually (by adding require equipment to the manifest at the top of the file), or it will also be included if you have a require_tree line.
See http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives for more information.
Make sure you have the *= require_tree . in your application.css. It will be responsible to include all stylesheets from the current directory.
I cleared the contents and changed the extension from .css to .css.scss. And now it works.
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.