We're in the process of upgrading from grails 2.5 to 3, as a starting point, we're migrating resources to asset-pipeline. I've read through the docs superficially, but in testing ran into a scenario that's causing problems... resources are getting included multiple times on the page.
The problem is best illustrated by exampe. Create testing.js file in assets/javascripts:
$(document).ready( function() {
alert("test alert");
});
In application.js (included in main.gsp layout) add //= require testing. On any page in application add <asset:javascript src='testing'/>. Launch the page and the alert shows twice.
Is there a way to configure asset-pipeline so as not to do this?
I assume I'm missing something, because this seems like a big problem with transitive dependencies from plugins (e.g., everything depends on jquery).
Adding grails.assets.bundle=true to Config.groovy doesn't seem to help.
Edit: Adding clarification with jquery example
Our application's application.js contains, among many other things: //= require jquery-version.js
Plugins we use provide GSPs that also include jquery-version.js (either in their own asset tag or transitively through included js files) because those pages require jquery to be on the page. Perhaps I have some fundamental misunderstanding, but this seems correct... the plugin GSPs should require their dependencies.
Now, on this page, jquery.js is included multiple times. This seems like a step back from Resources which would resolve multiple inclusions through transitive modules.
Related
Can't seem to figure out how to make the asset pipeline play nice AngularJS template files for components which like this:
app.component("chart", {
templateUrl: "./templates/chart_element_tpl.html",
controller: ChartElementController,
bindings: {
accounts: '='
}
});
I've looked at the various posts on this problem here but none of the suggestions seem to work. I always get the 404 error. One of them talks about upgrading sprockets to version 2.x but I am on version 4 already.
I have taken care to make sure my template has a different name than the javascript file as suggested in another post, but none of these things quite seems to do the trick.
FYI, the structure of the assets relevant assets directory is:
app/assetsjavascripts/chart_component.js
app/assets/javascripts/templates/chart_element_tpl.html
It does seem weird to me that an html template is stored in the javascripts folder but that seems to be the way people do it. I also made sure to include the directory in the applications.js manifest with
//= require_tree ./templates
I tried things like assets:clean and assets:precompile and yarn install and restarting the server but none of that seems to solve the problem.
I also have installed the angular-rails-templates gem and required it in application.js, also no help.
It does make sense to me that this is failing because the actual files are versioned etc. in the public directory, but not sure what to do about that so AngularJs can find my templates.
I am developing a website when i have third-party plugins (javascript plugins, with css files and images) and i don't want to separate the plugin between stylesheets and javascript, i want to keep the plugins folder, and each plugin with the javascript and the stylesheet.
And i use different plugins in different pages of the webapp. So i put a "plugins" folder inside "vendor/assets" but i don't know how to load them in the webpage.
Do you know how can i do that? or do you have any advice for working with javascript plugins?
Regards,
Try adding this in your application.css:
#import "/vendor/assets/plugins/css-stuff.css";
and in your application.js, try this:
<script src="/vendor/assets/plugins/javascript-stuff.js"></script>
That should work for you, but if not, then say something here.
I'm currently using the Grails resources plugin and I have many modules defined like this one:
bootstrap {
resource url:'js/libs/bootstrap/bootstrap.min.js'
resource url:'css/libs/bootstrap/bootstrap-responsive.css'
resource url:'css/libs/bootstrap/bootstrap-glyphicons.css'
resource url:'css/libs/bootstrap/bootstrap.min.css'
}
This is very convenient because it groups the Javascript and CSS files together into a single conceptual Bootstrap module.
I'm looking into the asset-pipeline plugin now, and it appears that files can only require other files of the same type, which means that I now have two trees of dependencies (CSS & JS) rather than one, which is a problem because there are interdependencies, e.g., bootstrap.js depends on bootstrap.css.
Does the asset-pipeline plugin allow for declaring inter-type dependencies? If not, what is the best way to deal with this issue?
I don't consider this as a problem. Organizing JS and CSS files separately (even though both belong to the same package/product such as Bootstrap) is a good thing and if the JS is not able to refer to the CSS, change the URI.
In my opinion, if you want to use Bootstrap with Grails, try twitter-boostrap.
Checkout my blog post regading Bootstrap CSS templating in Grails and if you want an example, checkout an project I did using Twitter Bootstrap here.
I have a best practices question regarding one-off javascript plugins and their role in the Rails asset pipeline.
I'm new to Rails, and am working on a new project. The site template I'm using uses a large collection of js plugins for added functionality. (eq chartjs.org, ckeditor, and about 40 others) Since these are needed on a page-by-page basis, I'm not sure if I should really load them all in the application.js manifest.
Currently, I have the template's assets under the /vendor directory and only the core assets are being loaded from my application.js manifest.
Thoughts on how/where to include the plugins?
As i know that rails default added all js file include in application.js by //= require_tree . so, you can remove it and add only those file which you want to added. and if you want to run only specific function then you can use location.pathname with condition and it will work for only that specific page.
Running Guard with Spin works great to keep my testing fast, except when assets are relevant and need compiling. It seems that the test environments recompiles all assets whenever I change something in them. I've seen examples of deployment scripts that only recompile assets whose source has changed. Can this be done for testing too? Or is there another way to speed up asset compilation for tests?
I'm using a rather specific setup so I'll be happy to supply more information if needed, though I feel the answer from this question might be of use in many more cases than just mine.
You can take a look at this article written two months ago . It seems rather complex task . Nathan has written a gem that precompiles only changes , made to assets . It can be used in development and testing env.
EDIT : Here is another article , related with speeding up our tests . It has a different point of view about js testing .
You can for example avoid adding require_tree in Your application js and css files.
In addition, use proper file extensions - if something is js - then name it like normal js files. Same for css and scss.
You can also precompile assets locally to have it compiled locally on development by command rake assets:precompile - but remember to delete it after tests to see changes in assets next time (it can be generated in vendor folder)
I am sure but you can try:
In application.js file write all js file in tree order like this:
//= require jquery
//= require jquery_ui
//= require jquery.ui.core