【问题标题】:Wildcard selectors in css path for grunt-contrib-compassgrunt-contrib-compass 的 css 路径中的通配符选择器
【发布时间】:2015-02-08 02:15:00
【问题描述】:

我正在尝试将 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 文件相同的目录中。

例如,这是运行 compass 任务时其中一个 .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 文件相同的文件夹中。

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

【问题讨论】:

  • 如果我理解正确,您不能在 cssDirsassDir 选项中使用通配模式,因为 Compass Grunt 插件只能编译到每个给定目标的一个目录。
  • 请原谅,我还是 Grunt 的新手。在这种情况下,给定的目标是什么?
  • 啊,没问题。这里给定的目标是devGrunt 始终将其任务定义为任务本身,在这种情况下为 compass,并为任务定义多个目标。除了dev 之外,您还可以继续定义更多目标(顺便说一下,它也不需要称为dev)。要调用任务的特定目标,请使用grunt task:target 调用它。在你的情况下grunt compass:dev。在这里简单地运行grunt compass 也可以,因为您只定义了一个目标。
  • 好的,我现在明白了!我不明白那是一个目标。所以我需要做的就是为每个appX 文件夹指定一个不同的目标,然后我可以为每个目标设置一个唯一的grunt-contrib-watch 任务,并明确定义sass/css 文件夹路径——不需要通配符。非常感谢蒂姆桑。如果您发表评论作为答案,我会用绿色复选标记标记它。

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


【解决方案1】:

我的 cmets 转换成答案:

目前,compassgrunt 插件只能处理每个目标的单个目录,因此无法匹配多个目录。

为了规避此限制,您始终可以在您的 compass 任务中创建多个 targetsGrunt 功能)。 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 在使用上述命令运行时将按顺序执行所有

而且,正如您所见,official Grunt documentation 为您提供有关 taskstargets 的更多详细信息。

【讨论】:

  • 谢谢蒂姆桑!!你个混蛋! \m/
猜你喜欢
  • 1970-01-01
  • 2014-02-09
  • 1970-01-01
  • 1970-01-01
  • 2013-09-08
  • 1970-01-01
  • 2014-11-06
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多