0

我的站点文件结构是这样的：

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
        }
    }
}

这可能吗？和/或有更好的方法我应该这样做吗？

4

1 回答 1

1

编辑您的监视任务以在没有主题名称的情况下运行less:compileTheme-task，并监视主题文件夹中的所有较少文件：

watch: {
    themeCss: {
        files: "app/less/themes/**/*.less",
        tasks: ["less:compileTheme"],
        options: {
          spawn: false
        }
    }
}

现在您可以添加一个监视事件处理程序，您可以在其中获取更改的文件。提取主题名称，并配置您的较少任务：

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"
  });
});

当然，您的主题名称的检测应该更可靠，但我认为您了解如何进行动态观看！

于 2014-10-28T14:16:32.053 回答