gruntjs - 以编程方式运行 Compass Grunt 任务

Question

我有一个在 grunt 上运行的 compass 任务，它生成一个编译的 base.css 文件以及一些特定于页面的 css 文件。 base.scss @imports _settings.scss partial 规定了所有文件的一些全局设置。

compass: {
    theme: {
        options: {
            sassDir: '/sass',
            cssDir: 'css',
            fontsPath: 'css/fonts',
            imagesPath: 'img'

        }
    }
}

我希望能够多次调用 compass 任务，但每次都以某种方式规定在 base.scss 中导入不同的设置文件并使用不同的 cssDir 为输出。这是可以实现的吗？

我尝试使用下面的方法，涉及在两个不同的 compass 任务中基本上添加到 compass config.rb(通过原始)。每个任务都包含一个不同的导入路径，指向包含设置文件的目录。这个设置文件然后被选择为 @import settings.scss 在我的 base.scss 的顶部。

compass: {
    theme: {
        options: {
            httpPath: '/',
            sassDir: '/sass',
            cssDir: 'css',
            raw: 'add_import_path  "/sass/theme"'

        }
    },
    theme2: {
        options: {
            httpPath: '/',
            sassDir: '/sass',
            cssDir: 'css',
            raw: 'add_import_path  "/sass/theme2"'

        }
    }
}

这似乎有效，虽然感觉像是一个黑客，但它是我最接近工作解决方案的方法。似乎应该有办法做到这一点，但到目前为止，解决方案已经暗示了我。

我现在想知道我是否可以使用 registerTask() 来创建我需要的功能，就像我在这里找到的那​​样:

Programmatically pass arguments to grunt task?

Answer 1

您当前的配置

我想您现在工作方式的主要警告是 更改导入路径不适用于在主题之间共享内容 .对此的建议是将两个非部分文件分开。

shared/
  _partial1.scss
  _partial2.scss
  _partial3.scss
  _partial4.scss
  _partial5.scss
  _base.scss
theme1.scss
theme2.scss

初始化每个主题的变量在每个主题#.scss 中。
然后，如果您需要将其部署到同名的不同文件夹中，例如“base.css”，您可以使用另一个 grunt 插件，例如 https://github.com/gruntjs/grunt-contrib-copy , 将每个 theme#.css 复制到名为 base.css 的 theme# 文件夹中。

在 theme1.scss 上，内容可能是:

$variable1: '';
$variable2: '';
$variable3: '';

@import 'base',
        'partial1',
        'partial2',
        'partial3',
        'partial4',
        'partial5';