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选项的值），当罗盘尝试编译时会出现以下错误：

在匹配＆＃34; lowres / sprites / * .png＆＃34;的加载路径中找不到任何文件。您当前的加载路径是： /用户/ joachimdyndale /开发/ myProject的/ myapp_joachim /凸出/图像

我已尝试添加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（）中的图像路径由指南针任务和cssmin任务转换。我想知道cssmin任务的设置是否会引起这个问题，而不是罗盘任务的问题。

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

但是，从罗盘任务导出的相对路径将通过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 - ＆gt; ../ 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.

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

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

2 个答案: