gulp-usemin可以接受多个文件吗？

Question

我在使用 usemin 时遇到了问题，但不确定是否是一个 bug。

我的应用程序结构很简单：

- root
    |- gulpfile.js
    |- app
    |   |- index.html
    |   |- about.html
    |   |- contact.html
    |   |- js
    |       |- a.js
    |       |- b.js
    |       |- c.js
    |       |- d.js
    |       |- e.js
    |
    |- dist

我的每个HTML文件中都有一个usemin块，用于包含所有脚本，例如：

Each of my html files has a usemin block in it to include all of the scripts for example:

<!-- build:js js/app.js -->
<script src="../js/a.js"></script>
<script src="../js/b.js"></script>
<script src="../js/c.js"></script>
<script src="../js/d.js"></script>
<script src="../js/e.js"></script>
<!-- endbuild -->

当我运行以下任务时：

gulp.task('usemin'. function() {
    gulp.src('app/*.html')
        .pipe(usemin({
            assetDir: 'app/**/'
        }))
        .pipe(dest('dist/'))
});

只有第一个HTML文件会复制到新目录，此情况下JS被合并为预期的结果。

当我将gulp.src更改为gulp.src(['index.html','about.html','contact.html'])时，我遇到了不同的问题，所有HTML文件都被复制，但只有按字母顺序排列的第一个HTML文件运行usemin块，并用新的脚本替换5个脚本。

任何见解都很好，我已经广泛阅读了gulp文档和gulp-usemin文档，但找不到发生这种情况的原因。

NPM网站上对这两种情况中的第一种甚至作为示例给出，不确定发生了什么？也许与我从哪里运行gulpfile有关？

这真的可能吗？

谢啦。

编辑：不确定这里发生了什么，但我创建了一个全新的项目，并从头开始构建/安装了npm插件和脚本，一切都正常。这不是很好的解决方案，但它节省了我的时间。

- Daniel Tate

---

你至少在 assetDir: 'app/**/ 中缺少一个结束引号。从 gulp-usemin 的 GitHub 页面借鉴：“资产的备用根路径”。所以也许应该是 “app/”？ - juunas

@juunas 这是伪代码，但谢谢，我会纠正的。在这个例子中，我的额外资源在 app/js 中，所以我需要指定它们在 app 的子目录中，而不是与 .html 文件相同。 - Daniel Tate

在检查了 code 后，app/** 可能无法正常工作，因为它被插入到 path.resolve 中。 - juunas

我也遇到了这个问题。你解决了吗？ - rubik

我最终使用了不同的方法，这个插件似乎并不适合我的用途。对我来说，这似乎是插件的限制。 - Daniel Tate

Answer 1

不要使用gulp-usemin，而是覆盖主文件以在bower.json中使用，像这样：

{
  "name": "appName",
  "dependencies": {
    "angular": "~1.3.9",
    "angular-animate": "~1.3.9",
    "angular-ui-router": "~0.2.13"
  },
  "overrides": {
    "angular": {
      "main": "angular.min.js"
    },
    "angular-animate": {
      "main": "angular-animate.min.js"
    },
    "angular-ui-router": {
      "main": "release/angular-ui-router.min.js"
    }
  }
}

- Nima Mehanian