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选项的值),当罗盘尝试编译时,我会收到以下错误:

在匹配"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-compassgrunt插件.

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任务中转换为缓存占用的URL(例如,../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
  }
}