[英]Dynamic Grunt Watch configuration
我的站点文件结构是这样的:
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 less:compileTheme:{{ themeName }}
运行grunt任务:
watch: {
themeCss: {
files: "app/less/themes/{{ themeName }}/**/*.less",
tasks: ["less:compileTheme:{{ themeName }}"],
options: {
spawn: false
}
}
}
这可能吗? 和/或有没有更好的方法我应该这样做?
编辑监视任务以运行不带themeName的less:compileTheme
-task,并监视theme文件夹中所有较少的文件:
watch: {
themeCss: {
files: "app/less/themes/**/*.less",
tasks: ["less:compileTheme"],
options: {
spawn: false
}
}
}
现在,您可以添加一个监视事件处理程序,以获取更改后的文件。 提取themeName,并配置您的较少任务:
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的检测应该更可靠,但是我认为您对如何进行动态监视有了想法!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.