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. 在第二个块上运行 minifier （uglifyjs）
2. 将第一个块与第二个块的缩小版本连接起来（步骤 1）

如果这些块在同一个文件中，是否有可能。我看到了一个关于流量的部分。无法跟踪我是否可以命名配置块，并在每个配置块上设置单独的流程。它讨论基于文件名（索引.html）的流。我应该如何写咕噜咕噜useminPrepare部分。

Answer 1

我遇到了同样的问题。如果您对两个文件而不是一个文件感到满意，您可以在此处使用 usemin 的分支。它支持很少的新流，即

• 库
• 库2分钟
• 无效
• 删除

查看完整说明。所以你的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 --> 

不幸的是，嵌套块现在可能不是一个好主意。但你可以尝试一下。

要安装叉子而不是常规的咕噜声，请按原样更改package.json

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

并密切关注主存储库 - 也许该功能也离实现目标不远了。

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']);

希望这有帮助。