【发布时间】: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 文件相同的文件夹中。
非常感谢您提供的任何见解。
【问题讨论】:
-
如果我理解正确,您不能在
cssDir和sassDir选项中使用通配模式,因为CompassGrunt插件只能编译到每个给定目标的一个目录。 -
请原谅,我还是 Grunt 的新手。在这种情况下,给定的目标是什么?
-
啊,没问题。这里给定的目标是
dev。Grunt始终将其任务定义为任务本身,在这种情况下为compass,并为任务定义多个目标。除了dev之外,您还可以继续定义更多目标(顺便说一下,它也不需要称为dev)。要调用任务的特定目标,请使用grunt task:target调用它。在你的情况下grunt compass:dev。在这里简单地运行grunt compass也可以,因为您只定义了一个目标。 -
好的,我现在明白了!我不明白那是一个目标。所以我需要做的就是为每个
appX文件夹指定一个不同的目标,然后我可以为每个目标设置一个唯一的grunt-contrib-watch任务,并明确定义sass/css 文件夹路径——不需要通配符。非常感谢蒂姆桑。如果您发表评论作为答案,我会用绿色复选标记标记它。 -
更多关于 grunt 目标的信息:gruntjs.com/configuring-tasks#task-configuration-and-targets
标签: javascript sass gruntjs compass-sass grunt-contrib-compass