.Net Core / Angular CLI - NPM 构建自动化（html 到 cshtml）答案

【问题标题】：.Net Core / Angular CLI - NPM Build Automation (html to cshtml).Net Core / Angular CLI - NPM 构建自动化（html 到 cshtml）
【发布时间】：2017-04-27 15:30:32
【问题描述】：

我正在使用 Visual Studio 2017 中的 npm 脚本使用 .Net Core (netcoreapp1.1) 和 Angular CLI (1.0.1) 开发构建过程。

是否可以编写 npm 脚本以获取 Index.html 正文标记的内容（来自 Angular CLI 创建的文件）并将其放入 .cshtml 文件的正文中？

理想情况下，我希望只使用 npm 脚本并远离 Gulp，但如有必要，我可以接受 Gulp 解决方案。

更新说明：我的目标是将 Angular CLI 创建的 Index.html 文件中的必要脚本包含到预先存在的 cshtml 视图中，该视图有一些我需要保留的代码。

如果需要创建一个新文件，有没有办法从两个现有文件（html 和 cshtml）中解析数据并将它们合并为一个？我真的只需要将 html 正文中的脚本添加到我的视图中。

【问题讨论】：

标签： angular asp.net-core asp.net-core-mvc angular-cli npm-scripts

【解决方案1】：

如果您不打算将任何服务器代码添加到生成的 HTML 中，并且您真的只是想重命名文件，那么它可以像使用 CLI 本身一样简单。

将index.html 重命名为index.cshtml
将.angular-cli.json 中的index 条目更新为index.cshtml
然后使用 CLI 正常构建

我用一个新项目对此进行了测试，似乎在开发版本 (ng b) 和生产版本 (ng b -prod -aot) 上都能正常工作。您也可以尝试实际包含一些服务器代码，但如果编译器发现无效标记，您可能会遇到一些解析错误。

【讨论】：

我确实需要包含一些服务器代码，例如在 html 标记中包含 'dir="ltr"'，以及设置 window['_app_base'] 的短暂生命周期。我认为视图也需要在顶部包含“@{ Layout = null }”。
应该保留 html 属性和 iife 没有问题。大多数人不知道您实际上可以修改 index.html 并且更改将包含在输出 index.html 中。就像我提到的那样，您可以尝试包含服务器代码，看看它是否仍然可以编译。
按广告宣传。 razor 语法没有引起任何冲突。
优雅的解决方案。我是否正确地假设因为它们是 cshtml 它们存在于 views 文件夹中而不是 wwwroot 中？
你是正确的 Muqeet。我正在将 cshtml 文件移出 wwwroot。

【解决方案2】：

这是一个 gulp 解决方案，

var gulp = require('gulp');
var rename = require('gulp-rename');

gulp.task('default', function () {
    copy('<your html path>', 'cshtml file name', '<destination path>');
});

function copy(src, filename, dest) {
    gulp.src(src)
        .pipe(rename(filename))
        .pipe(gulp.dest(dest));
}

【讨论】：