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包含所有需要缩小的文件。

我喜欢。

在第二个块上运行minifier（uglifyjs）
concat first block with minized version of second（步骤1）

是否可以将这些块放在同一个文件中。我在flow看到了一节。无法跟踪我是否可以命名配置块，并在每个配置块上设置单独的流量。它基于文件名（index.html）讨论流程。我应该如何编写grunt 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目标。只需在包含构建注释的文件上运行它，就像这样。

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

usemin看起来不应该与使用minPrepare有太大的不同，但你可能会发现你想要做的是'seed'adminminParepare与一个文件，如果它包含与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']);

希望这有帮助。

grunt-usemin：定义自定义流

2 个答案: