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）

如果这些块在同一个文件中，是否有可能。我在flow 上看到了一个部分。无法了解我是否可以命名配置块，并在每个配置块上设置单独的流程。它谈论基于文件名（index.html）的流程。我该怎么写咕噜useminPrepare部分。

Answer 1

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

• 库
• libs2min
• 无效
• 移除

见full descriptions。所以你的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 --> 

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

要安装 fork 而不是常规的 grunt-usemin，请更改您的 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 目标。只需在包含您的构建 cmets 的文件上运行它，就像这样。

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

希望这会有所帮助。