grunt-usemin：定义自定义流程

Question

我正在使用grunt-usemin插件。我想知道如何进行以下操作。

我在index.html中有两个usemin配置块。

<!-- build:js /scripts/scriptsmin.js -->
<script src="/scripts/jquery.min.js"></script>
...
...
<!-- endbuild -->

<!-- build:js /scripts/scripts.js -->
<script src="/scripts/app.js"></script>
....
...
<!-- endbuild --> 

第一个区块，scriptsmin.js，是被压缩过的文件。 第二个区块，scripts.js，包含了所有需要被压缩的文件。

我想要：

1. 在第二个区块上运行压缩器（uglifyjs）
2. 将第一个区块与第二个区块的压缩版本（步骤1）合并

如果这些区块在同一个文件中，是否可行？我看到了关于流程的部分。我不确定我是否可以为配置块命名，并对每个块设置单独的流程。它讨论了基于文件名（index.html）的流程。我应该如何编写grunt的useminPrepare部分。

- bsr

---

你知道目前的grunt-usemin版本是否支持这个吗？ - fischermatte

Answer 1

我也遇到了同样的问题。如果你可以接受两个文件而不是一个文件，你可以使用usemin的一个分支这里。它增加了几个新的流程，包括：

• libs
• libs2min
• void
• remove

请参见完整说明。因此，你的html应该是这样的：

<!-- build:libs2min /scripts/scriptsmin.js -->
<script src="/scripts/jquery.js"></script>
...
...
<!-- endbuild -->

<!-- build:js /scripts/scripts.js -->
<script src="/scripts/app.js"></script>
....
...
<!-- endbuild --> 

目前来说，嵌套块可能不是一个好主意。但你可以尝试一下。

如果要安装分支版本的grunt-usemin而不是常规版本，请按以下方式更改package.json

"devDependencies": {
    ...
    "grunt-usemin": "Rauno56/grunt-usemin",
    ...
},

同时关注主要代码库 - 也许这个功能离主要代码库不远了。

- Rauno56

Answer 2

只是想知道为什么你需要两个单独的目标来存放你的JavaScript文件，尤其是如果它们将被压缩和合并成一个文件。我会这样做，只在文件末尾有一个脚本块：

<!-- build:js /scripts/scripts.js -->
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/app.js"></script>
<!-- endbuild -->

如果你的所有JS都在一个块中而不是两个块中，那么理解起来会更容易。 useminPrepare 是一项任务，基本上会更新你的Gruntfile配置，以包括脚本和样式的concat、cssmin和uglify目标。只需在具有构建注释的文件上运行它，就像这样。

useminPrepare: {
    html: 'build/index.html'
}

usemin 和 useminPrepare 不应该有太大的区别，但你可能会发现你想要做的是用一个文件来“种子化” useminPrepare，如果它包含了与其余 HTML 相同的构建块。因此，实际的 usemin 配置中可能会有更多的文件：

usemin: {
    html: ['build/index.html', 'build/about.html', 'build/contact.html']
}

在使用 useminPrepare 后，运行您的 concat、uglify 和 cssmin 任务，最后再运行 usemin。因此，您可以创建一个自定义任务，如下所示：

grunt.registerTask('build', ['useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);

希望这能有所帮助。

- Ben

---

感谢您的帮助。我有两个代码块的原因是，我想保留精简后的外部库（如jquery、angular等），只进行合并操作。据我所知，最好不要再次通过经过充分测试的精简文件运行精简程序。因此，我把它们都放在一个代码块中。其他文件（例如我的自定义js）需要被精简，然后与其他文件合并，这样就只需下载一个文件。很抱歉没有说清楚。您认为这样做有意义吗？是否可行？再次感谢。 - bsr

jQuery 通过 Uglify 进行缩小（因此不会看到任何区别），Angular 通过 Google Closure 进行缩小（如果再次使用 Uglify 压缩，几乎没有区别）；Uglify 本身是一个经过实战检验的工具，如果您在运行缩小文件时遇到任何问题，最好报告问题，然后我会使用 Uglify 缩小我加载的所有内容，无论它是否已经通过 RequireJS 和 r.js 优化器进行了缩小，并且没有看到任何问题。唯一的缺点显然是缩小更多的代码需要更多的时间，但我怀疑运行两次缩小是否会引入任何错误。 - Ben