prevent yeoman.io from minifying images - yeoman

So I've been using yeoman.io for my projects and I have a set folder structure for my images. But when I build it changes the file name of my files.
I even use:
$ yeoman build:text
because I want to only minify my css,js and html templates, yet it still minifies the images.
Not sure if im doing something wrong.
EDIT:
I commented out all instances of img in the gruntfile and that seemed to work, but I dont think thats the right way.

You mean image optimization or revisioning? There is no problem to configure GruntFile.js to your own needs. It makes Yeoman/Grunt very powerful, because it is highly adaptable.
If you don't want image optimization, remove the configuration in the img task.
// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
},
If you dont want the renaming of image files, remove the img line from the rev task:
// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
js: 'scripts/**/*.js',
css: 'styles/**/*.css'
},

If you remove the image revving it will bust your cache, you should try to keep the revving and update your JS files instead.
Try updating your usemin block to something like this:
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
js: '<%= yeoman.dist %>/scripts/{,*/}*.js',
options: {
assetsDirs: [
'<%= yeoman.dist %>',
'<%= yeoman.dist %>/images',
'<%= yeoman.dist %>/styles'
],
patterns: {
js: [
[/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
}
}
}
You should already have the usemin method, just add the js attribute with you js path regex and add the pattern attribute.
This will replace all occurrences of the image in your JS files with the new revved version, so that the clients' browsers don't use a cached image instead of a new one.

Related

webpack 2 - is there a way to do global public url replacement

There are few assets generated via webpack. The assets themself are pretty regular, application.js, application.css, images and so on. The point is that at runtime that assets should be hosted inside a specific server-side assembly and because of this, all the urls should be changed in this manner:
dist/application.js ==> ?path=content.application.js
dist/application.css ==> ?path=content.application.css
...and so on for every style/script/image in the output bundle.
I tried the publicPath option of output section, but it looks like this functionality is not so powerful. So if I do this:
output: {
// ...
publicPath: "?path=content."
},
When the result for root html is like this:
<script type="text/javascript" src="?path=content./application.js">/script>
<link href="?path=content./application.css" rel="stylesheet"></head>
Which is not correct as it has additional / that I cannot get rid of.
It would be great if publicPath was a function that returns dynamic path for every resource:
output: {
// ...
publicPath: function(originalFile){
return /* generate publicPath dynamically */
}
},
...but it's not the case with webpack2. So is there any method to globally replace public urls for all the resources? Or maybe some loader that does this.

asset_path returns wrong path for folder

I have .swf files under vendor/assets/images/swf/. I need the asset path of that folder.
But this (.js.coffee.erb)
#= soundmanager2
$ ->
soundManager.setup
url: '<%= asset_path "swf/" %>'
is rendering this (.js):
(function() {
var $ = jQuery;
$(function() {
return soundManager.setup({
url: '/swf/'
});
});
}).call(this);
I am using rails 4.0.0.rc1. I am on development mode. The path /assets/swf/soundmanager2.swf returns 200, while /swf/soundmanager2.swf returns 404. The helper image_path returns /images/swf/, but /images/swf/soundmanager2.swf also returns 404.
It is not worth the trouble, because you would have to disable digest to get the name of the files right. So the solution is to fix the library. In the case of Sound Manager 2, I did this:
Some CoffeeScript that I require:
#= require soundmanager2
jQuery ->
soundManager.swfNames =
"/soundmanager2.swf": "<%= asset_path('swf/soundmanager2.swf') %>"
"/soundmanager2_debug.swf": "<%= asset_path('swf/soundmanager2_debug.swf') %>"
"/soundmanager2_flash9.swf": "<%= asset_path('swf/soundmanager2_flash9.swf') %>"
"/soundmanager2_flash9_debug.swf": "<%= asset_path('swf/soundmanager2_flash9_debug.swf') %>"
soundManager.setup
debugMode: <% if Rails.env.development? %>true<% else %>false<% end %>
url: '/'
In my copy of soundmanager2.js (V2.97a.20130512), inside the definition of normalizeMovieURL:
url = ... // After url is set
url = sm2.swfNames[url]; // Workaround
on rails 4 all the asset helpers (image_path, asset_path and the likes) appear to only return a config.assets.prefix-prefixed path if the asset you're accessing is actually resolvable by sprockets.
put simply: it must exist in you asset path on the disk after precompilation.
therefore, asset_path('swf/') will not work since it is a directory and not a file.
also, i experienced the following: rails < 4 (sprockets, rather) copied original images (and thus swf files) and created a digested version of that same file. because of this soundmanager was still able to find the non-digested swf files even though i have config.assets.digest = true.
with rails 4, these original images are not copied anymore because they changed some precompile internals which leads soundmanager to throw up if it wants to fallback to flash.
to properly fix this soundmanager needs to be patched, like michelpm proposes.
for soundmanager-rails i started working on a fix including a proper patch for soundmanager which you can find over on github.

Select2 is not showing dropdown, clear, or any other images

I think I am missing something here.
Select2 is working fine in my MVC application, except, it is not showing dropdown image, search image, clear image, or I should say any other image which is a part of this plugin.
Following is how I have used it in my page:
1) Razor view
<div>
<input id="countriesList" type="hidden" class="bigdrop"/>
</div>
2) Script
$('#countriesList').select2(
{
placeholder: 'Select Countries',
minimumInputLength: 0,
maximumSelectionSize: 3,
multiple: true,
allowClear:true,
ajax: {
url: '#Url.Action("GetCountriesList", "Geography")',
dataType: 'json',
data: function (term, page) {
return {
searchTerm: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
Also, I have copied select2 files (i.e. js, css, images, and all) in the same folder structure as they were downloaded from its site, and I can see CSS and JS being loaded as well. It seems I am not using appropriate classes due to which images are not getting loaded.
I worked it out myself.
While bundling used in an MVC application, the style bundles must have names similar to physical folder containing CSS.
i have same problem and i think #Nirman's answer is not good (for) me.
because if the bundle and directory has same name. mvc has been confused and not loads css and other contents that placed in that directory.
look at the 2nd part of second answer of this post.
it shows the conflict between same name of bundles and directories:
Do not use folder paths as bundle names
it says:
"2. Do not use folder paths as bundle names"

Porting static html/javascript site to iPad using trigger.io

Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal

jPlayer + Rails 3.1.3 swfPath?

I am trying to get jPlayer working with the flash fallback in a rails app and so far no luck! My constructor right now looks like this:
$("#jquery_jplayer_1").jPlayer({
preload: "auto",
errorAlerts: true,
swfPath: "javascripts",
solution: "flash, html",
supplied: "oga",
wmode: "window",
ended: function(e) {
...some function...
}
});
I cannot get the swfPath correct it seems, and I must be missing something here about how jPlayer is looking for that path. My other assets, such as images from stylesheets, seem to be correctly routed to the assets folder/images folder. I can't seem to find the magic combination to get jPlayer to find the Jplayer.swf. I have tried putting the swf file in the public folder, in a folder within the public folder, in the assets folder, and in the javascripts folder within the assets folder. No luck! Has anybody dealt with this problem before?
I have the same problem... After finding no answer on the Internet, I started trying stuff :)
This worked for me (Rails 3.2):
$(document).ready(function(){
$("#jplayer").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a: "url goes here"
});
},
swfPath: "/",
supplied: "m4a",
solution: "flash, html"
});
});
or in coffeescript:
$ = jQuery
$ ->
$(document).ready ->
$("#jplayer").jPlayer(
ready: (event) ->
$(this).jPlayer "setMedia",
m4a: "url goes here"
preload: "auto",
swfPath: "/",
solution: "html, flash",
supplied: 'm4a')
I placed the Jplayer.swf file under public/. Works now!
I think a nifty way of doing this is to add a swf dir to the asset pipeline.
You can do this by adding
config.assets.paths << Rails.root.join("app", "assets", "swf")
to your config/application.rb file and drop the Jplayer.swf file in vendor/swf/Jplayer.swf
In your JS file you import this by using .js.erb
$(document).ready(function(){
$("#jplayer").jPlayer({
swfPath: "<%= asset_path "Jplayer.swf" %>"
});
});
Since nobody has mentioned it here yet, you can also do it like this in your jplayer initialization code:
Works with Rails >= 3.2 that uses the asset pipeline!
swfPath: "<%= escape_javascript(asset_path('jplayer/Jplayer.swf')) %>",
solution: "flash,html",
supplied: "rtmpa,mp3",
And remember the file has a capital J :-)

Resources