Question

我正在使用VS 2015 + ASP.net vnext + Angular 2 + Typescript + gulp.js.我已将scripts/**/*.ts文件自动移至wwwroot/app文件夹。现在我想为像Angular 2这样的库做同样的事情。我想要一个gulp进程注入

angular.js

index.html

<environment names="Development">;

angular.min.js

index.html

<environment names="Production">。

当然，我希望所有的lib都能自动发生，而不需要了解库：

<any>.min.js（制作）
<any>.js（发展）

any.js的缩小可以由我完成。

实际上，我只需要考虑dependencies中的所有package.json ......但是我迷失了。

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

或者是否可以取dependencies名称并将其与.js连接，然后在node_modules文件夹下搜索此文件...（有点hacky且不安全... ）

更新

改述/澄清我的问题：

当触发某个事件（如build / clear / etc等）时，如何自动将我的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自动将它们包含在您的剃刀生成的html文件中。

Answer 2

所以你的问题是你想将脚本自动注入HTML中，对吗？您可以使用Wiredep模块。

要将资产复制到其他文件夹，有许多模块可以将文件从一个文件夹复制或链接到另一个文件夹。 Gulp-copy是我能找到的第一个。

使用gulp

2 个答案: