8

我正在使用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. 将第一个块与第二个的缩小版本连接起来（步骤 1）

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

4

2 回答 2

2

我有同样的问题。如果您对两个文件而不是一个文件感到满意，您可以在此处使用 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 -->

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

要安装 fork 而不是常规的 grunt-usemin 更改您的package.jsonas

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

并密切关注主回购 - 也许该功能也离那里不远。

于 2014-01-15T17:51:37.880 回答
0

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

希望这可以帮助。

于 2013-10-27T17:38:57.843 回答