使用 Visual Studio 发布的 Bower

Question

我想在使用 Visual Studio 2015 开发的 MVC 4 应用程序中使用 Bower。我知道当您有一个 MVC 5 项目时，使用 Visual Studio 2015 Update 1，有一个用于 Bower 管理的漂亮 UI，就像 nuget界面。这部分并不是很关键。

我目前正在使用 bower - 我有 npm 和 bower 设置，并且我在解决方案中有 package.json 和 bower.json 文件。保存时，Visual Studio 会自动运行“npm install”，我在 package.json 中有一个安装后步骤来运行“bower install”。

我不想将 bower_components 放入解决方案（或源代码管理）中。我想要的是只保留 json 配置文件，当你保存时，所有依赖项都会被检索。

这一切在开发中都可以正常工作，但是不能右键单击 Web 项目，发布。 Publish 不运行“npm install”，并且不包含未包含在解决方案中的文件（除非它似乎以某种方式与未包含在解决方案中的 nuget 包一起使用）。 “发布 Web”功能是使用 IIS 部署将我的 Web 应用程序部署到生产环境的方式。

如何使 Visual Studio Web Publish 与 Bower 一起使用？

另一种选择 - 我已经看到 Team System Builds 有新的钩子可以运行 gulp 任务，但我不知道你可以以这种方式直接发布到 IIS。

Answer 1

在 ASP.NET Core（即 MVC6）中，Bower 被配置为（在 .bowerrc 文件中）将脚本添加到 wwwroot/lib 而不是 bower_components 文件夹。该内容确实由 Visual Studio 发布。

使用 .a bowerrc 文件的相同方法适用于 MVC4 网络（至少如果您使用的是 Visual Studio 2015）。但是，它也会被检查到版本控制中，因此它可能不是您想要的。

.bowerrc 文件可用于执行各种操作（请参阅http://bower.io/docs/config/）。但是，要让 Bower 将脚本添加到 ~/scripts/lib 中的项目中，您只需添加以下 json：

{
  "directory": "scripts/lib"
}

Answer 2

您可以使用 gulp 或 grunt 脚本（选择您喜欢的任何内容）将正确的文件从 bower_components 文件夹复制到类似 scripts/lib 的位置，而不是引用/部署完整的 bower_components 文件夹。

然后，您可以将这些文件包含在源代码管理中并随后部署它们。

以下是我用来完成此任务的 grunt 文件：

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        copy: {
            main: {
                files: [
                  {
                      expand: true,
                      flatten: true,
                      src: [
                          'node_modules/vss-sdk/lib/VSS.SDK.js',
                          'node_modules/moment/moment.js',
                          'node_modules/moment-timezone/moment-timezone.js',
                          'node_modules/jquery/dist/jquery.js',
                          'bower_components/datetimepicker/jquery.datetimepicker.js',
                          'bower_components/datetimepicker/jquery.datetimepicker.css',
                      ],
                      dest: 'scripts/lib',
                      filter: 'isFile'
                  }              
                ]
            }
        }
    });

    grunt.loadNpmTasks("grunt-exec");
    grunt.loadNpmTasks("grunt-contrib-copy");
};