使用 Grunt 添加 "active" 类到菜单项

Question

我正在使用 Grunt 构建一组静态页面，这些页面作为 site/application 一起运行。为了坚持 DRY 实践，我正在使用一个名为 grunt-processhtml 的包来做 "includes".

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

其中 post- 处理我组装的静态文件并添加适当的 class。但是，我一辈子都想不出如何为 "process all of the .html files and add the appropriate classes to each of them."

配置它

我最后一次失败的尝试是这样的：

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

然而，插件似乎并不想为源使用这种输入：

Warning: Unable to read "purgatory/html/download.html,purgatory/html/upload.html" file (error code: ENOENT). Use --force to continue.

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

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

Answer 1

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

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

Answer 2

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

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

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

接下来意识到不是输入字符串有误，而是我配置副本不正确。展开时，目标是源路径的重新创建。为了解决这个问题，您发出 CWD。这意味着您的输入路径本质上是 "null"-ish 并且它不会在目标中创建 "purgatory" 目录。

最终任务现在按预期运行！

使用 Grunt 添加 "active" 类到菜单项

Add "active" classes to menu items using Grunt

javascript

gruntjs

使用 Grunt 添加 "active" 类 到菜单项

Add "active" classes to menu items using Grunt

javascript

gruntjs

使用 Grunt 添加 "active" 类到菜单项