Grunt compass task not compatible with this directory structure?

Question

I have the following directory structure (only showing the corresponding bits for illustration):

proj \
     \ Gruntfile.js
     \ package.json
     \ test \ (all my tests are in this folder structure)
     \ app \
           \ index.html
           \ scripts \ (all my scripts are in here)
           \ views \ (all views are in here)
           \ styles \
                    \ style.css
                    \ oldie.css
                    \ print.css
           \ images \
                    \ hires \ (all high resolution images are here)
                    \ lowres \ (all low resolution images are here)

The compass of my Gruntfile.js file is as follows:

compass: {
    options: {
        require: "susy",
        sassDir: '<%= my.app %>/styles',
        cssDir: '.tmp/styles',
        imagesDir: '<%= my.app %>/images',
        javascriptsDir: '<%= my.app %>/scripts',
        fontsDir: '<%= my.app %>/styles/fonts',
        importPath: 'app/components',
        relativeAssets: true
    },
    dist: {},
    server: {
        options: {
            debugInfo: true
        }
    }
}

<%= my.app %>allowed app. My problem is that I cannot specify that the images in the generated CSS files should have paths starting with images/, and not app/imageshow they currently do.

If I change imagesDir: '<%= my.app %>/images'to imagesDir: 'images'(or add the latter as a value for the parameter imagesPath), I get the following error when the compass tries to compile:

, "lowres/sprites/*. png". : /Users/joachimdyndale/ /MyProject/myapp_joachim//

config: 'compass.rb' compass.rb :

http_images_path = '../images'
http_generated_images_path = '../images'

.

, : - , , , CSS, , app ? , , . .

grunt-contrib-compass grunt.

Answer 1

, relativeAssets false. , , , , grunt-contrib-compass:

Indicates whether the compass helper functions should generate relative urls from the generated css to assets, or absolute urls using the http path for that asset type.

, , , ? , ? , , !

Answer 2

.

- url() css cssmin. , cssmin , .

dist/styles ( cssDir), relativeAssets false, httpImagesPath - "../images". url (../images/hoge.jpg) .tmp/styles/*. Css, .

, , cssmin. , noRebase false cssmin.

Gruntfile.js:

compass: {
  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    generatedImagesDir: '.tmp/images/generated',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/bower_components',
    httpImagesPath: '../images',
    httpGeneratedImagesPath: '../images/generated',
    httpFontsPath: '/styles/fonts',
    relativeAssets: false,
    assetCacheBuster: false,
    raw: 'Sass::Script::Number.precision = 10\n'
  },
}

cssmin: {
  options: {
    root: '<%= yeoman.app %>',
    noRebase: true
  }
}

, URL-, (,../images/hoge.jpg → ../images/43f78e35.hoge.jpg) usemin. , usemin:

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles']    // <- add styles directory
  }
}