让 Grunt 在开发和生产中包含不同的 Javascript 文件

Question

我正在尝试Grunt 并且有一个关于在开发和后续阶段中包含 javascript 文件的问题。澄清一下：缩小、连接等不是这里的问题 - 只是输出/替换。

在开发阶段，我想单独包含 javascript 库和文件 - 用于调试，可能只是因为我一直这样做，并且不知何故我不喜欢将它们连接到开发中。因此，在开发时，我希望在我的 HTML 文件中输出以下内容：

<script src="js/lib-1.js"></script>
<script src="js/lib-2.js"></script>
<script src="js/lib-3.js"></script>
...

然后对于生产或登台，我希望有 grunt 输出：

<script src="js/all-files-in-one.js"></script>

如何以最简单的方式实现这一点？

Answer 1

您可能想看看 grunt-usemin 插件 (https://github.com/yeoman/grunt-usemin)。 Here's a simple example.

基本上，如果我有一些想要连接到单个文件中的 javascript 文件（或者我想要连接到每组单个文件中的 javascript 文件集），我可以将引用这些文件的脚本标签放在“构建”块中.

<!-- build:js assets/js/foobar.js -->
<script src="./assets/js/foo.js"></script>
<script src="./assets/js/bar.js"></script>
<!-- endbuild -->

<!-- build:js assets/js/bazbuz.js -->
<script src="./assets/js/baz.js"></script>
<script src="./assets/js/buz.js"></script>
<!-- endbuild -->

现在，当我运行包含“useminPrepare”和“usemin”任务的 grunt 构建时，我的 index.html 中的那些脚本标签将被替换为：

<script src="assets/js/foobar.js"></script>
<script src="assets/js/bazbuz.js"></script>

示例和文档说明了如何配置它并将其用于其他资产，例如 css。