我正在尝试将grunt-contrib-compass用于具有多个app文件夹的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文件相同的文件夹中。
非常感谢您提供的任何见解。
答案 0 :(得分:3)
我的评论转化为答案:
目前,compass
grunt
插件只能处理每个目标的单个目录,因此没有与多个目录匹配的通配符。
为了规避此限制,您始终可以在targets
任务(compass
功能)中创建多个Grunt
。 target
是task
的细分,可用于设置不同的执行方案。
targets
插件的两个不同的compass
可能看起来与此类似:
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'
}
}
}
这会为您提供两个targets
,dev
和live
,它们会指定不同的选项。要单独执行每个target
,只需在命令行中调用它们,如下所示:
$ grunt compass:dev
$ grunt compass:live
target
的命名完全取决于您,没有严格的约定要遵循。如果您的target
只有一个task
,那么就像这样运行任务:
$ grunt compass
执行单target
。您无需明确指定它。但是,如果您的targets
中有多个task
,那么Grunt
将在运行上述命令时按顺序执行所有。
而且,正如您自己所见,official Grunt
documentation为您提供了有关tasks
和targets
的详细信息。