javascript - 使用 gulp 将外部库移动到 wwwroot 文件夹

Question

我正在使用 VS 2015 + ASP.net vnext + Angular 2 + Typescript + gulp.js。我已经自动化了我的scripts/**/*.ts文件移动到wwwroot/app文件夹。现在我想对像 Angular 2 这样的库做同样的事情。我希望 gulp 进程注入(inject)

• angular.js里面index.html里面<environment names="Development">节点；
• angular.min.js里面index.html里面<environment names="Production">节点。

当然，我希望我的所有库自动发生这种情况，而无需了解库:

• <any>.min.js (生产)
• <any>.js (开发)

any.js 的缩小我可以做。

实际上我只需要考虑所有dependencies在package.json ...但后来我迷路了。

我的想法可以实现吗？或者是否已经存在一个工具？或者工作流程是否应该分解为更多手动步骤，例如我必须复制/粘贴某个库？

或者是否可以采取 dependencies命名并用 .js 连接它然后在node_modules下搜索这个文件文件夹...(有点hacky并且不安全...)

更新

改写/完善我的问题:

如何自动添加我的 npm dependencies (不是 devDependencies )对环境 "Development"节点触发特定事件(如构建/清除/等)时...

Answer 1

有一个用于此目的的小标记帮助器，称为 asp-src-include。

想象一下您想要包含一些 *.js 文件的情况:

<script src="/app/app.js"></script>
<script src="/app/controller/controllerA.js"></script>
<script src="/app/controller/controllerB.js"></script>
<script src="/app/service/userservice.js"></script>

等等。您可以使用单个“”标签包含所有这些内容。

<script asp-src-include="~/app/**/*.js"></script>

因此，对于生产/开发部署，您的 Razor 标记可能如下所示

<environment names="Development">            
    <script asp-src-include="~/app/**/*.js"></script>
</environment>
<environment names="Staging,Production">
    <script asp-src-include="~/app/**/*.min.js"></script>
</environment>

为此，您需要 @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" (从 RC1 或 RC2 开始，它是“@addTagHelper *, Microsoft.AspNet.Mvc.TagHelpers” - 不带*.cshtml 文件或 _Layout.cshtml 中的双引号 ) 声明。

编辑

有一个名为 gulp-npm-files 的模块可以执行类似的操作，它将所有 *.js 文件复制到目标文件夹中。你可以在 GitHub 上看到它的来源如果您想编写自己的模块来扩展功能。

但这可能并不完全是您想要的，因为文件夹通常包含多个文件，例如 angular2 (AngularJS 2.0) 包含数十个文件(*.js 和 *.ts)，但是您大多只对编译/缩小的感兴趣，在 angular2/bundles/* 中找到，例如 angular2.js 、 angular2.min.js > 或 angular.dev.js。

特定依赖项的 package.json 没有提供有关在哪里找到此编译文件的信息。所以我想，除非您想将所有文件复制到 wwwroot ，否则没有办法自动执行此操作，这在我看来毫无意义，特别是如果您想使用 asp-src-include ，因为它所包含的内容没有区别，因此您希望最大限度地减少 wwwroot 文件夹中 *.js 文件的数量。

我想您能做的最好的事情就是通过 gulp 任务手动复制依赖项，然后使用 asp-src-include 自动将它们包含到您的 razor 生成的 html 文件中。