当前位置 : 主页 > 网页制作 > Nodejs >

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

来源:互联网 收集:自由互联 发布时间:2021-06-16
我有一个在grunt上运行的指南针任务,它生成一个已编译的base.css文件以及一些特定于页面的css文件. base.scss @imports _settings.scss partial,它规定了所有文件的一些全局设置. compass: { theme: { o
我有一个在grunt上运行的指南针任务,它生成一个已编译的base.css文件以及一些特定于页面的css文件. base.scss @imports _settings.scss partial,它规定了所有文件的一些全局设置.

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?

您当前的配置

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

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';
网友评论