yeoman / generator-angular

Yeoman generator for AngularJS
http://yeoman.io
5.73k stars 1.44k forks source link

Image optimizer does not optimize JPG and PNG images #443

Closed doomsbuster closed 10 years ago

doomsbuster commented 10 years ago

After running the grunt build - even though the image optimizer was run on the images in the project, there is no reduction in the size of the JPG or PNG images. Attached snapshots contain the sizes before the build and the size after the build: After the build: https://www.evernote.com/shard/s43/sh/2be1de91-d856-4f77-8b17-2ac206003760/fdc6249b0354f496d28f78c6f2b19b85

Before the build: https://www.evernote.com/shard/s43/sh/9fa500a1-8d85-4848-be13-39ba40bccc60/9a7920e732dab563462ac138f9d31a4e

Grunt Build Logs: https://www.evernote.com/shard/s43/sh/36b14872-36d0-422f-a2a3-a3def9d16a5c/aa188da5a6dc0fde2c4ce386ee4d70b8

eddiemonge commented 10 years ago

did you modify the gruntfile? what is your gruntfile? what is your file/folder structure?

doomsbuster commented 10 years ago

Please find the snapshots of my folder structure in the below links: Top Level Angular App Folders: https://www.evernote.com/shard/s43/sh/ae792933-c7b1-4c71-96e8-0ccf82ebb021/58d1cae8b05c24a9b5df999f0a5e6821

App Directory & Images Directory: https://www.evernote.com/shard/s43/sh/77d66aae-4735-4640-95d1-22b35822924c/1976ba5d14ad2d46fdc8de82b897844d

Grunt File ImageMin Section: https://www.evernote.com/shard/s43/sh/a3b69267-4359-4728-91ab-41c66500c6af/270cc9499bb74b3f8992f79fba598815

eddiemonge commented 10 years ago

its more helpful to gist the gruntfile and maybe install tree and the gist the output of that

doomsbuster commented 10 years ago

Ok, i am not sure how to Gist the grunt file, any pointers?

eddiemonge commented 10 years ago

copy and paste: https://gist.github.com/

doomsbuster commented 10 years ago

https://gist.github.com/doomsbuster/7404046 - Please let me know if you have all you need. https://www.evernote.com/shard/s43/sh/a6dd6e14-bfda-4ab0-b774-1b5c67374bc9/2cd77d6ecfc52c698335344d166186d4

This is the full folder structure, didn't know how to gist the folder structure.

eddiemonge commented 10 years ago

you are using an outdated gruntfile. you need to change https://gist.github.com/doomsbuster/7404046#file-gruntfile-js-L251 to match https://github.com/yeoman/generator-angular/blob/master/templates/common/Gruntfile.js#L259

doomsbuster commented 10 years ago

Thanks eddie, this worked. Could you explain what did the change do? Also i don't see image optimization doing quite a lot -- my 5.2 Mb image was optimized to 49Mb. While when i tried to optimize via www.imageoptimizer.net it brought down the size to 560 Kb, is there something I am missing here?

eddiemonge commented 10 years ago

you should update your project as there has been a few changes.

your image was being optimized and then overwritten by the original because of the copy task. if you want more aggressive optimizations, you can customize that by looking at grunt-contrib-image's options

doomsbuster commented 10 years ago

Ok, sounds good. Let me update my project and checkout the grunt-contrib-image task. Will let you know how it goes!

doomsbuster commented 10 years ago

I updated the generators and grunt-contrib plugins and tried the build. The grunt-contrib-imagemin options don't work, i have created an issue for grunt-contrib-imagemin. Waiting to hear back.