search

benhoIIand / grunt-sprite-generator

Grunt task that generates a sprite from images referenced in a stylesheet and then updates the references with the new sprite image and positions
Other
18 stars 9 forks source link

Replacing the background-image end computed URL #10

Closed davidpelayo closed 8 years ago

davidpelayo commented 10 years ago

Sometimes, depending on your project needs, you need to specify different relative routes for your frontend application.

In my case, I needed to replace the end computed URL by a relative path where the images/ folder belongs to.

The only thing you would need to do, it's just to specify two parameters on the grunt job options, which coexist all together to work properly, which are 'endUrlPatternToReplace' and 'endUrlPatternReplacer':

spriteGenerator: {
      options: {
        algorithm: 'binary-tree',
        endUrlPatternToReplace: 'app/',
        endUrlPatternReplacer: '../',
        padding: 0
      },
      default_task: {
        files: {
          'app/images/sprites.png': ['./app/css/main.css']
        }
      }
    },

So, all URL embedded into the background-image of your source CSS file will be generated by replacing 'app/' by '../', which are the two options informed here.

I find this quite useful considering it's very difficult up to now to configure your job with different relative paths setups (I spent like two days trying to solve this problem out).