I'm new to Grunt – loving it so far (bye bye Codekit) – but I'm having an issue where the output of any compass url helpers (image-url(), font-url()) contains the incorrect path. Here is my gruntfile;
module.exports = function (grunt) {
grunt.initConfig(
{
pkg : grunt.file.readJSON('package.json'),
compass : {
dev : {
options : {
httpPath : '/',
sassDir : 'scss/scss',
cssDir : 'css/compiled',
imagesDir : 'images',
javascriptsDir : 'js',
fontsDir : 'fonts',
outputStyle : 'nested',
relativeAssets : true
}
}
},
cssmin : {
dev : {
files : {
'css/min/ctips-global.min.css' : [
'css/compiled/global/base.css',
'css/compiled/global/header.css',
'css/compiled/global/footer.css',
'css/compiled/global/navigation.css',
'css/compiled/global/entry-content.css',
'css/compiled/global/widgets.css',
'css/compiled/global/animations.css'
]
}
}
},
uglify : {
options : {
mangle : false
},
dev : {
files : {
'js/min/modernizr-latest.min.js' : ['js/vendor/modernizr/modernizr-latest.js']
}
}
},
watch : {
css : {
files : ['scss/scss/**', 'Gruntfile.js'],
tasks : ['compass', 'cssmin'],
options : {
nospawn : true
}
},
js : {
files : ['Gruntfile.js'],
tasks : ['uglify']
}
},
concurrent : {
options : {
logConcurrentOutput : true
},
dev : {
tasks : ['watch:css', 'watch:js']
}
}
});
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', ['compass', 'cssmin', 'uglify']);
grunt.registerTask('dev', ['concurrent:dev']);
};
When I run 'grunt dev' Grunt runs without any warnings – indicating that it can find all the necessary resources – but the output of the compass url helpers is always missing the directory where the gruntfile exists.
When I add the directory in as follows ...
...
options : {
httpPath : '/',
sassDir : 'scss/scss',
cssDir : 'css/compiled',
imagesDir : 'mydirectory/images',
javascriptsDir : 'js',
fontsDir : 'mydirectory/fonts',
outputStyle : 'nested',
relativeAssets : true
}
...
... the resulting output is correct, yet grunt throws a series of warnings saying that it can't find the resources. An example of the error is as follows;
WARNING: 'Brown-Regular.eot' was not found (or cannot be read) in /Applications/MAMP/htdocs/website.com.au/website/content/themes/mydirectory/mydirectory/fonts
So it seems there is some disparity between where compass thinks the httpPath is and where Grunt thinks it is in my project, but I'm not sure how to fix this.
Currently, when I run Compass I get a whole lot of warnings telling me that the images and fonts cannot be found (it's looking in the wrong directory), but everything comes out ok in the wash...
Can anyone give me some guidance on where I might look to figure out why this discrepancy is occurring?
