以编程方式运行Compass Grunt任务

时间:2014-05-02 13:15:55

标签: gruntjs compass-sass grunt-contrib-compass

我有一个在grunt上运行的指南针任务,它生成一个已编译的 base.css 文件以及一些特定于页面的css文件。 base.scss @导入 _settings.scss 部分,它指示所有文件的某些全局设置。

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

        }
    }
}

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

我尝试使用下面的方法,主要在两个不同的罗盘任务中添加指南针config.rb(通过raw)。每个任务都包含指向包含设置文件的目录的不同导入路径。然后,此设置文件将作为我的base.scss顶部的 @import settings.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?

1 个答案:

答案 0 :(得分: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,将每个主题#.css复制到名为base.css的主题#文件夹中。

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

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

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