使用 Grunt 向菜单项添加“活动”类答案

【问题标题】：Add "active" classes to menu items using Grunt使用 Grunt 向菜单项添加“活动”类
【发布时间】：2015-09-17 02:54:24
【问题描述】：

我正在使用 Grunt 构建一组作为站点/应用程序一起运行的静态页面。为了坚持 DRY 实践，我使用了一个名为 grunt-processhtml 的包来执行“包含”。

但是，我的“包含”导航没有适当的类来指示导航中的当前页面。如果需要，我可以使用 JavaScript 来完成（在创建菜单后根据变量或 URL 设置活动类）。但是，我也偶然发现了这个：

grunt-autonav

它对我组装的静态文件进行后处理并添加适当的类。但是，我一生都无法弄清楚如何将其配置为“处理所有 .html 文件并为每个文件添加适当的类。”

我上次失败的尝试如下所示：

autonav: {
  options: {
    parent: '.nav'
  },
  dev: {
    src: '<%= dirs.purgatory %>/html/**/*.html',
    dest: '<%= dirs.dev %>'
  }
}

但是，插件似乎不想为源使用这种输入：

警告：无法读取 “purgatory/html/download.html,purgatory/html/upload.html”文件（错误代码：ENOENT）。使用 --force 继续。

它可以看到我的两个 HTML 文件，但不知道如何从那里获取它。我不知道我是否有配置错误，或者插件是否不能以这种方式工作。他们文档中给出的示例似乎需要指定需要自定义导航的每个页面。但这可能是阅读理解问题。

有人知道如何使用上述工具或任何其他工具在 Grunt（而不是 JS）中实现我的目标吗？我不介意添加新工具，但我做得不够。

【问题讨论】：

标签： javascript gruntjs

【解决方案1】：

要在 grunt 及其所有插件中使用动态文件列表，您需要将 src/dest 包装在 files 对象中并将 expand 设置为 true：

autonav: {
  options: {
    parent: '.nav'
  },
  dev: {
    files: {
      expand: true,
      src: '<%= dirs.purgatory %>/html/**/*.html',
      dest: '<%= dirs.dev %>'
    }
  }
}

【讨论】：

我之前没有遇到过这种模式，但是我尝试过，仍然返回错误。但我认为你正在使用“扩展”，所以我将它从“文件”对象中解开并保留expand: true。这次它处理了文件！然而……不正确。如果原始开发人员使用通配符作为输入字符串，它不会找到导航项并正确更新它。 :) 不过，这不是你的问题——你的“expand：true”行让我更近了一步！也许我需要查看作者的源代码。谢谢！

【解决方案2】：

Xavier Priour 让我走上了正确的道路，但在得出最终解决方案之前，我不得不摸索一下：

autonav: {
  options: {
    parent: '.nav'
  },
  dev: {
    files: [
     {
        expand: true,
        cwd: '<%= dirs.purgatory %>/html',
        src: '**/*.html',
        dest: '<%= dirs.dev %>'
      }
    ]
  }
}

首先，我必须查看expand，它提供了使用Xavier 提到的files 属性的示例。但是，这些示例显示 files 是一个对象数组。不确定它是否“必须”，但我遵循了该模式并将其包装为一个数组。

接下来意识到不是输入字符串错误，而是我错误地配置了副本。展开后，目标是源路径的重新创建。为了解决这个问题，您发出 CWD。这意味着您的输入路径本质上是“null”-ish，它不会在目标中创建“炼狱”目录。

最终任务现在按预期工作！

【讨论】：