Can we change the links in grunt which mostly will be local to production links during grunt build?
For e.g.
.a-container {
background: url(../images/hello.jpg) no-repeat top center;
background-size: 100%;
}
After build it should look like
.a-container {
background: url(http://hello.com/blah/blah/hello.jpg) no-repeat top center;
background-size: 100%;
}
We have the URL upfront which can be configured in grunt file.
If you're not stuck using raw CSS, I'd recommend throwing grunt-contrib-compass on top of the project. You'll be able to set dev/production environments and run them when you want. You'll specifically want to look at the option for images. I structure mine in the following way:
compass: {
dev: {
sassDir: 'build/sass',
cssDir: 'stylesheets',
imagesDir: 'build/assets/images/'
},
production: {
sassDir: 'build/sass',
cssDir: 'stylesheets',
imagesDir: 'http://example.com/images'
},
}
You don't have to necessarily leverage other parts of sass/comapss (though there will be some upfront work switching the directory and file structure around).
If this approach doesn't work for you, you may want to take a look at Yeomans usemin task. Unfortunately, I'm not as familiar with that one and can't provide much help with it.
To complete the question which I started off, here how you can achieve it.
compass: {
dist: {
options: {
config: 'app/config.rb',
sassDir: 'app/styles',
cssDir: 'dist/styles',
imagesDir: 'app/images/',
javascriptsDir: 'app/scripts',
fontsDir: 'app/styles/fonts',
importPath: 'app/components',
outputStyle: 'compressed',
},
},
}
And you should have a config.rb file as Compass doesn't expose some options as command line arguments.
config.rb
http_images_path = "http://cdn.example.com/images/"
Also in your sass/scss files don't forget to use, image_url('hello.jpg') instead of only url('hello.jpg') , url() is ignored by Compass.
Next time when you run grunt compass:dist you will have the urls baked into the generated css files.