since I wan't to keep my js files separated for some views, I am making use of a helper function inside the view which yields the js file into the html head
def javascript(*files)
content_for(:head) { javascript_include_tag(*files) }
end
So I was wondering how can I achieve this with assets the pipeline and the pre compile mechanism?
Best,
Phil
Every JS file that is being required in the HTML head section needs to be precompiled. By default only application.js is being precompiled, but you can schedule additional files for precompilation in config/application.rb:
config.assets.precompile += ['admin.js', 'customer_page.js']
Those files can be manifests, just like application.js, if you want to group the JS-files together.
Related
I use webpack for JS and now I want to use it for styles. I have a lot of styles in different folders and i want to compile them all without requiring each of them mannaully. The question is how to gather all the .less files in the folders and compile them via less-loader?
This isn't how webpack is meant to work, really. If you really want to do this, grunt/gulp is going to be a better choice.
Webpack's require mechanism ensures you build only the CSS you need for any given entry point, and gives you dependency management as well. If you do want to use webpack, but don't want to use the style-loader to insert them into the DOM etc., you can use the Extract Text plugin to build your compiled CSS into a separate file.
I found some workaround using require.context.
First you need to create a js file in the root of the styles folder if you don't have one.
Use this code if you use css or less and always extract them
require.context('./', true, /(\.less$)|(\.css$)/);
First argument is relative path to folder in which webpack should search for the files, second tells that it should search in subfolders and the last one is regexp of the extension of the files that webpack should require. Then you need to requre this file or use it as entry point. This works if you use extract-text-webpack-plugin but doesn't work otherwise.
Using styles without extracting them to style separate file
The example above doesn't work if you don't extract them because webpack generate modules with styles but doesn't execute them. This is complete example that works in both cases:
(function (requireContext) {
return requireContext.keys().map(requireContext);
} (require.context('../', true, /(\.less$)|(\.css$)/)));
When a rails app is created with rails 3.1 or 3.2.0.rc2 it by default creates an app/assets/stylesheets/application.css file, however each controller/model created there after creates an app/assets/stylesheets/<controller or model name>.scss.
Why isn't an application.scss created by default?
How do you properly incorporate an application.scss and get rid of the application.css entirely?
I would just rename it to application.scss and then you can import in your other .scss files like this:
// Inside application.scss
// HTML Reset
#import "reset.scss";
// Users CSS
#import "users.scss";
When you compile the SCSS, it will generate the application.css for you from all of the other imported files or CSS within that file.
application.css just plays like a house keeper, it represents the correct order of other .scss files.
Put the real working CSS in application.css may not good practice, as the comment generated by rails below:
You're free to add application-wide styles to this file and they'll
appear at the top of the compiled file, but it's generally better to
create a new file per style scope.
From this page,
http://www.yiiframework.com/wiki/23/how-to-create-a-breadcrumb-widget/
It seems it suggests that we should put the files in the component folder. But if my widget contains javascript and css files, where should these files be placed?
By the way, is this a good idea that I create it as an extension? If I go this way, all widget files are more self-contained in a folder inside the extension folder. But since the widget I am going to work on is very customized, it's unlikely that it will be useful to other people or my other projects. Making it an extension seems a little bit strange.
I understand that it does not really matter where I put these files as long as the paths I am using in the codes are correct but I would like to know the common practice.
I think the common practice is to put the widget in extensions folder with js & css files in an folder named asset. In the php class file, you do initialization first by publishing the asset with yii asset manager.
The file structure may be like
extensions/
widget_name/
widget.class.php
assets/
plugin.js
style.css
I would join the recommendation to put the widget under /protected/extensions.
I put the assets in a slightly more detailed manner: /protected/extensions/WidgetClassName/assets/ and the widget view files in /protected/extensions/WidgetClassName/views/...
Don't forget to edit your /protected/config/main.php and add a row in the 'import' section (for autoloading of the widget): 'ext.WidgetClassName.WidgetClassName.*'
I know how to use jquery alone but since I am pretty new to Rails 3.1 I have only little idea how to integrate jquery into Rails.
So far I have come up with following steps but the first (naive) way of programing things are usually wrong :-)
datepicker plugin for jquery (e.g. jquery-ui-timepicker-addon.js) into app/assets/javascripts
add line //= jquery-ui-timepicker-addon to application.js
When I want date picker in some VIEW I will create app/assets/javascripts/VIEW.js and in there I will use standard jQuery to hook up date picker
Is there a more elegant way?
You can try this:
Add the jquery-ui .js file to the app/javascripts folder. Which you can download [here][1]
[1]: http://jqueryui.com/download. Maybe your jquery-ui-timepicker-addon.js will do as well.
You don't need to add code to application.js. As all .js files in the javascripts folder
will be included and compiled automatically
Add the following line to
app/javascripts/{viewname}.js.coffee
$ -> $('.date').datepicker()
The line above is the coffeescript equivalent of:
$("#datepicker").datepicker();
In Rails, when serving static files, you get an asset ID that's appended to the URL, e.g.,
<script src="/javascripts/application.js?1300371955" ...
<link href="/stylesheets/custom.css?1299690788" ...
This way, the URL of a static file is changed if the file’s timestamp is changed and browsers automatically request the new file.
I saw that by using the helper methods for including static assets --- stylesheet_link_tag, javascript_include_tag and image_tag --- Rails automatically adds timestamps to all references to those files.
How can I implement something similar for other assets that don't have such helper methods e.g., .swf files?
(Does this "strategy" to force the re-download have a name; if so, what is it called?)
The Rails method that appends the timestamp to assets is called rails_asset_id, and is defined in ActionView::Helpers::AssetTagHelper. Though it is a private method, it can be accessed in a helper to generate one for your custom tags like so:
def swf_param_tag(path)
asset_id = rails_asset_id(path)
"<param name='movie' value='#{path}?#{asset_id}'/>"
end
It needs you to pass in the path, because it then calls File.mtime(path).to_i.to_s on it to get the last modified time on it.
There is further explanation about what the asset tag buys you here:
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html
#Unixmonkey: your solution works very well.
As an alternative there's also the swf_fu plugin:
treat your Adobe Flash swf files like any other asset (images, javascripts, etc...) and embed them using SWFObject 2.2
that has asset tagging built-in.