grunt-usemin:定义自定义流

Question

我正在使用grunt-usemin插件.我想知道下面该怎么做.

我有两个usemin配置块index.html.

<!-- 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. concat first block with minized version of second(步骤1)

Is it possible if these blocks are in the same file. I saw a section on flow. Couldn't follow whether I can name the block of configuration, and set seperate flow on each of it. It talks about flow based on file name (index.html). How should I write the grunt useminPrepare section.

Answer 1

只是想知道为什么 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']);

希望这可以帮助。