我的站点文件结构是这样的:
app
less
themes
default
modern
etc
public
themes
default
css
modern
css
etc
所以 /app/less/themes/{{ themeName }}/*.less
会编译成 /public/themes/{{ themeName }}/css/*.css
.
我动态设置了 Grunt Less 任务并且工作正常。
示例:grunt less:compileTheme:modern
less: {
compileTheme: {
options: {
compress: false,
yuicompress: false,
optimization: 2,
sourceMap: true,
sourceMapFilename: "public/themes/<%= grunt.task.current.args[0] %>/css/styles.css.map",
sourceMapURL: "/themes/<%= grunt.task.current.args[0] %>/css/styles.css.map"
},
files: {
"public/themes/<%= grunt.task.current.args[0] %>/css/styles.css": "app/less/themes/<%= grunt.task.current.args[0] %>/styles.less"
}
}
}
但我不确定如何让 Grunt Watch 任务正常工作。理想情况下,它将看到主题文件夹名称并运行 grunt 任务作为 grunt less:compileTheme:{{ themeName }}
:
watch: {
themeCss: {
files: "app/less/themes/{{ themeName }}/**/*.less",
tasks: ["less:compileTheme:{{ themeName }}"],
options: {
spawn: false
}
}
}
这可能吗?和/或是否有更好的方法来执行此操作?
最佳答案
编辑你的 watch 任务以运行 less:compileTheme
- 没有 themeName 的任务,并在你的主题文件夹中观看所有 less 文件:
watch: {
themeCss: {
files: "app/less/themes/**/*.less",
tasks: ["less:compileTheme"],
options: {
spawn: false
}
}
}
现在您可以在获取已更改文件的地方添加一个监视事件处理程序。提取主题名称,并配置您的 less-task:
grunt.event.on('watch', function(action, filepath) {
var themeName = filepath.split('/')[3];
grunt.config('less.compileTheme.files', {
"public/themes/" + themeName + "/css/styles.css": "app/less/themes/" + themeName + "/styles.less"
});
});
当然检测你的 themeName 应该更可靠,但我认为你知道如何进行动态监视!
关于javascript - 动态 Grunt Watch 配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26590333/