Grunt and Compass seem to have different ideas on httpPath

[mishterk]

Hi there,

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, 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.

[mishterk]

Any takers on this one?

[mishterk]

.... anyone??

[richardcalahan]

I had the same issue, setting relativeAssets to true fixed the problem for me. But yes, this is a confusing discrepancy.

[mishterk]

Yeah – that was where I ended up as well. Works well with relativeAssets set to true, but I'm surprised that noone has an answer for this.