css 路径中的通配符选择器,用于 grunt-contrib-compass



我正在尝试将grunt-contrib-compass用于具有多个应用程序文件夹的AngularJS项目。这是我的基本目录结构:

/root
   /appA
   /appB
   ...
   /appX
     /public
         /modules
             /moduleName
                 /css
                 /sass

gruntfile.js 存储在/root 中

我的指南针任务设置如下:

compass: {
    dev: {
        options: {
            cssDir: 'app*/public/modules/**/css',
            sassDir: 'app*/public/modules/**/sass',
            outputStyle: 'compressed'
        } 
    }
}

请注意"cssDir"和"sassDir"中的通配符选择器(*(。

当此任务运行时,它会在为"sass"指定的目录中成功找到 .scss 文件。但是,在创建.css文件时,它会在/root 中创建一个新的文件夹结构,如下所示:

/root
   /app*
       /public
           /modules
               /**
                 /css

"css"文件夹留空,实际的.css文件保存在与我的.scss文件相同的目录中。

例如,这是运行指南针任务时其中一个 .scss 文件的终端输出:

>> File "appStudentHousing/public/modules/studentHousingHome/sass/styles.scss" changed.
Running "compass:dev" (compass) task
directory appStudentHousing/public/modules/studentHousingHome/sass
write appStudentHousing/public/modules/studentHousingHome/sass/styles.css (0.003s)

该任务似乎识别了"sassDir"选项中的通配符选择器,但在"cssDir"选项中无法识别它们。它会创建一个空白文件夹结构,并在实际文件夹名称中使用星号,然后出于某种原因将输出.css文件保存在与 .scss 文件相同的文件夹中。

非常感谢您提供的任何见解。

我的评论转换为答案:

目前,compass grunt插件只能处理每个目标的单个目录,因此没有与多个目录匹配的通配。

为了规避此限制,您始终能够在compass任务中创建多个targets(Grunt功能(。targettask的细分,可用于设置不同的执行方案。

compass插件的两个不同targets可能如下所示:

compass: {
    dev: {
        options: {
            cssDir: 'app/dev/modules/css',
            sassDir: 'app/dev/modules/sass',
            outputStyle: 'compressed'
        } 
    },
    live: {
        options: {
            cssDir: 'app/live/modules/css',
            sassDir: 'app/live/modules/sass',
            outputStyle: 'compressed'
        } 
    }
}

这将给你两个targetsdevlive,它们指定了不同的选项。要单独执行每个target,只需在命令行上调用它们,如下所示:

$ grunt compass:dev
$ grunt compass:live

target的命名完全取决于您,没有严格的约定可循。如果您的task只有一个target,则像这样运行任务:

$ grunt compass

执行单个target。无需显式指定它。但是,如果您的task中有多个targets,则在使用上述命令运行时,Grunt应按顺序执行所有这些

而且,正如您自己所看到的,官方Grunt文档为您提供了有关taskstargets的更多详细信息。

最新更新