search

AdamBrodzinski / Retina-Sprites-for-Compass

A mixin for creating retina sprites with hover & active states
MIT License
233 stars 35 forks source link

Don't generate sprite on every save #5

Closed martinwolf closed 11 years ago

martinwolf commented 11 years ago

Hey, I'm not sure if this is the right place to post my question but I'm fairly new to GitHub, so I'm sorry in advance.

I love your solution and I'm using it on a relatively large project, but what's bugging me is that on every save of my SCSS the sprite gets generated even if there is no need for that because I didn't add or change any images. This generates waiting time and what's even worse is simple style injection without reloading the page is gone. I'm using CodeKit, if this is any helpful.

So do you think there is a way to solve this issue? I think there isn't, but hopefully I'm wrong. :D

Cheers, Martin

AdamBrodzinski commented 11 years ago

Hi Martin, welcome to Github!

I haven't used CodeKit, but I have the mac LiveReload app which is similar. Lately i've been using Yeoman for livereload and preprocessing.

It shouldn't be re-generating the images on every save, but it does check every sprite to see if it has changed. The lag might be from checking a lot of images.

Can you open up the terminal and cd into your project directory (where the config.rb file is) and run compass watch? It should say unchanged on the images on every save, unless they have changed.
from the demo directory using the terminal, a change to main.css with no image changes Screen Shot 2013-01-15 at 1 36 48 PM

and after a change to the 3 non retina images and a change in main.css Screen Shot 2013-01-15 at 1 45 58 PM

In the 2nd test above, I made huge 1800x500px buttons that took around 20 seconds to composite into a sprite on the first change. All further changes to main.css where < 1 second. I also tested in LiveReload with the same results. Your issue is likely lag from checking lots of images, rather than compositing images.

You can mitigate the 'checking' lag by breaking up your sass files into multiple small files. Not only does this make it more performant, but it makes it easy to find styles, and forces you to think in a more modular way. An example from Tagit's site (where this mixin was pulled from):

Screen Shot 2013-01-15 at 2 04 01 PM

Screen Shot 2013-01-15 at 2 09 30 PM

Hope this helps!! Adam

martinwolf commented 11 years ago

Hey Adam,

great, thanks for your detailed post. I tried what you said and it seems like CodeKit messed things up. I now switched to the terminal and compass watch in combination with LiveReload. Seems to work without any problems. Before I got an unrecognized file type png error, which was totally weird, but it's gone now. Hope this stays this way. :D

I'm already working in modular SCSS files, but it's nice to see how someone else structures their projects. Thanks!

Cheers, Martin

AdamBrodzinski commented 11 years ago

Great! glad that helps :)

You may want to checkout Yeoman for future projects (would be a pain to integrate now), it can start up a server, compile sass, coffee, etc., integrate live-reload, all with with yeoman server . It will also wire up all the tests with mocha for testing JS and will run them with yeoman test. My favorite feature is the yeoman build command, it will output a built folder that has minified CSS, JS, and also compresses the images with something like smushit and also sets up MD5 hashes prepended to filenames for heavy caching and a bit more.

Cheers!

martinwolf commented 11 years ago

Sounds great, I'll looking into it, thanks!