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.
Related
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.
What is asset-pipeline plugin and resources plugin?
What are the differences between them?
What are the advantages and disadvantages?
Are this mandatory to work with different js and css framework?
Put simply the asset-pipeline plugin replaces the resources plugin and should be used to manage your assets (such as js and css).
The resources plugin existed prior to the asset-pipeline plugin. It was used to ease and standardize the use of assets within a Grails application. Later it was replaced by the asset-pipeline plugin.
The asset-pipeline plugin is a very capable, feature rich, and extensible plugin for management of your assets (mainly js, css). It also has several other complementary plugins which allow for pre-processing of assets (such as LESS).
While the use of the asset-pipeline plugin isn't required it is highly recommended and the default for later versions of Grails.
What is asset-pipeline plug-in and resources plug-in?
Both of this are grails plug-in which enables programmer to use web
related resources or assets such as style sheets, js etc in an easy
and efficient way .
This plug-in reduces developers overhead in dealing with dependency,
order of loading and many other issues and also make efficient use of
resources or assets by compressing or removing duplicates and
decreasing the loading time
What are the differences between them?
There are many difference between them like how they load resources,
how they keep resources, how they find duplicates, file system
organization etc.
What are the advantages and disadvantages?
Advantages of asset-pipeline over standard grails resources plug-in:
File dependencies are in the top of your assets. (No Resources.groovy)
Assets in plugins become level with your app.
On the fly processing in Development mode (No more waiting for reloads)
Coffeescript, LESS, and others become first class citizens ( debuggable )
Require entire folder trees with one line
Better minification (UglifyJs) , and compiling before the WAR is built
Faster application startup time
Easy extensibility
Are this mandatory to work with different js and css framework?
No, you can directly use resources or assets, but it would be messy
and inefficient.
Ref:
http://grails-plugins.github.io/grails-resources/guide/
https://github.com/efficiently/larasset/wiki/Asset-pipeline
https://github.com/bertramdev/grails-asset-pipeline/wiki/Why-asset-pipeline-over-grails-resources-plugin
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.
How can I use the custom templates of angular ui bootstrap in rails?
I mean, if I use pagination for example it will look for a templates/pagination/pagination.html template.
The problem is that rails won't serve templates in that path, it actually needs to be assets/templates/pagination/pagination.html using the <%= asset_path(....) %> helper.
Hacking the angular ui bootstrap javascript file is a way, but I don't feel like hacking it every time I get a new version.
What I would suggest is to bundle custom templates with the library itself or inside a separate file. The technique to use is to fill in $templateCache with the content of your custom templates. Have a look at one of the files distributed with tamplates to see what I mean:
https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.3.0.js#L2042
You can bundle templates into the $templateCache as part of the build process or prepare this file manually (in this case you need to write templates as JS strings).
Downloading individual templates via XHR for each and every directive would be wasteful as it would result in many XHR requests and would slow down your application. Also, if you preload templates into the $templateCache you can specify required path, one that doesn't need to be a valid path on your WWW server.
I use bower to manage my js libs.
Hence I have these files in my vendor/assets/javascripts/ folder:
angular-ui/bootstrap-bower
With these files, you can simply require them in your javascript manifest file (usually application.js)
//= require angular-bootstrap/ui-bootstrap
//= require angular-bootstrap/ui-bootstrap-tpls
and then you don't need to specify any templates if you want to use the default built-in templates.
I find this solution in the following url
Ref:angular-ui-bootstrap-directive-template-missing
I'm just learning the new asset pipeline in Rails 3.1. One particular problem I'm having is with the way Sprockets just mashes all the found CSS stylesheets into one massive stylesheet. I understand why this is advantageous over manually merging stylesheets and minifying for production. But I want to be able to selectively cascade stylesheets instead of having all rules all mashed together. For instance, I want:
master.css
to be loaded by all pages in the Rails app, but I want
admin.css only to be loaded by pages/views within the admin section/namespace.
How can I take advantage of the great way that Rails 3.1 combines stylesheets and minifies them for production, but also have the former flexibility of being able to load only certain stylesheet combinations per layout?
Or should this be done by adding a class to body tags in layouts-
body class="admin"
And then target style rules as appropriate. Using SASS scoped selectors this might be a reasonable solution.
This is how i solved the styling issue: (excuse the Haml)
%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
= yield
This way i start all the page specific .css.sass files with:
#post
/* Controller specific code here */
&#index
/* View specific code here */
&#new
&#edit
&#show
This way you can easily avoid any clashes.
Hope this helped some.
I have a post about this on my website:
Leveraging Rails 3.1, SCSS, and the assets pipeline to differentiate your stylesheets
And check out this answer to another question: Using Rails 3.1 assets pipeline to conditionally use certain css
Hope this helps.
Best regards,
Lasse
#nathanvda: sure...
We make use of multiple layout files. So in our app/views/layouts, instead of having just application.html.haml (we use HAML), we actually ignore the application layout and use 3 custom layouts:
admin.html.haml (admin section views only)
registered.html.haml (registered/signed in users views only)
unregistered.html.haml (unregistered/unsigned in users views only)
So at the top of my admin.html.haml file I will have my stylesheet link tags to a separate admin.scss (we use SCSS) manifest. That manifest will load any necessary sub-stylesheets just for the admin section. This allows us to specify rules just for the admin section while also making use of common styles. For instance, we use jquery-ui throughout the site, so the styles associated with jquery-ui sit in their own stylesheet and we include them in the manifests for all 3 css manifest files.
This solution doesn't give you a single CSS file that can be cached, but it ends up giving you 3 CSS files, each of which can be cached. This allows a tradeoff between performance and some flexibility in organizing CSS rules so we don't have to worry about CSS rule collisions.
The way I've been doing it so far is to have two seperate folders a/ and u/ where a/ is for the admin view and u/ is for the user view. Then in the layout I point to the appropriate application.css with assets/u/application.css(js). Bit of a pain having to move the auto generated files each time but a lot less than having to require each file individually in the manifest.
I use something like
application.html.erb
">
show.html.erb
content_for :body_id do
page_specific_body_id
end