Yeoman, Grunt and Compass sprites
Update 12th of January 2014: Lots of things changed since writing this article. Will update soon.
Yeoman (version 1.0 beta) uses handy Grunt (version 0.4.0) scripts like $ grunt server and $ grunt (build) to speed up your workflow, however, they don’t work out of the box with the way Compass sprites are normally configured. This will make it work.
Normally Compass settings are in a config.rb file. With Grunt however it’s possible to specify
the settings in the Gruntfile.js instead. This is the default in a new Yeoman project. Following a standard Yeoman folder structure, you compile your styles (probably Sass or Less) from /app/styles to a /.tmp directory which is not where Compass is looking for its image paths. Therefore we need to change the Compass settings http_images_path and http_generated_images_path . However, these two settings are not directly accesible via the compass-cli, which means you can’t write it in your Gruntfile.js. You have two solutions:
1. Specify a config.rb with Grunt Add
config: ‘config.rb’ to your options of compass setting in Gruntfile.js (thanks, Starwilly)
2. Use the raw option You will need to make the following changes to your Compass settings in your Gruntfile.js.
compass: {
options: {
require: 'susy',
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: 'app/components',
relativeAssets: false,
raw: 'http_images_path = '../images'nhttp_generated_images_path = '../images'n'
},
dist: {
},
server: {
options: {
debugInfo: true
}
}
},