Grunt 指南针任务与此目录结构不兼容？

Question

我有以下目录结构（仅显示相关位用于说明目的）：

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)

我的 Gruntfile.js 文件的指南针部分如下所示：

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 %> 解析为 app。我的问题是我无法指定生成的 CSS 文件中的图像应该有以images/ 开头的路径，而不是像现在这样以app/images 开头的路径。

如果我将 imagesDir: '<%= my.app %>/images' 更改为 imagesDir: 'images'（或将后者添加为 imagesPath 选项的值），当 compass 尝试编译时，我会收到以下错误：

在加载路径中找不到与“lowres/sprites/*.png”匹配的文件。 您当前的加载路径是： /Users/joachimdyndale/Development/myProject/myapp_joachim/proj/images

我尝试添加 config: 'compass.rb' 属性并在 compass.rb 文件中包含以下内容：

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

但是，上面的完全没有效果。

那么我的问题是：有没有什么我还没有发现的方法来配置这一切，以便它既能找到图像又能将正确的路径写入 CSS 文件，还是我必须更改我的目录结构，以便将app 文件夹中的所有内容上移一级？我真的很喜欢目前的结构，但我承认这可能是目前 Compass 根本不支持的极端情况。

我正在使用grunt-contrib-compass grunt 插件。

Answer 1

我有同样的问题，已经解决了。

导出的css中url()中的image-path是由compass task和cssmin task转换的。我想知道 cssmin 任务的设置是否会导致这个问题，而不是指南针任务的设置。

我们希望相对路径指向 dist/styles（而不是 cssDir），因此 relativeAssets 应设置为 false，httpImagesPath 应设置为“../images”。设置这些选项后，您将在 .tmp/styles/*.css 中看到 url(../images/hoge.jpg)。

但是从 compass 任务导出的相对路径会被 cssmin 任务转换回绝对路径。为了避免这种情况，我们应该在 cssmin 任务的选项中将 noRebase 选项设置为 false。

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
  }
}

此外，这些设置可能会阻止在 usemin 任务中转换为缓存破坏的网址（例如，../images/hoge.jpg -> ../images/43f78e35.hoge.jpg）。为了避免这种情况，我在 usemin 任务的选项中设置了以下设置：

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

Answer 2

正如我的评论的后续，诀窍应该是将relativeAssets 设置为false。这一直是一个奇怪的描述，但我认为 compass documentation 比 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.

我已经重新阅读了您的问题几次，看起来这可能是发生了什么？资产与样式表相关，而不是与您的应用程序目录相关？我必须看看之前/之后，但很高兴它对你有用！