ASP .NET 5 - 将文件从节点模块复制到 wwwroot 的 grunt 任务

我有一个简单的 ASP .NET 5 空项目 - 安装了 npm 和 grunt。

我使用 npm 安装了一些客户端库，目前位于我的 ASP .NET 项目下的 node_modules 目录中。

我想将相关文件（例如，jquery.min.js）从node_modules文件夹复制到wwwroot文件夹中。

我不清楚如何使用 grunt 来执行此操作 - 因为每个节点模块都有自己的依赖关系树，并且包之间的文件结构似乎没有任何一致性。

我可以为我使用的每个客户端库明确编写一个 grunt 任务，但在这种情况下，我也可以手动下载所有内容并将文件手动放置在我需要的位置，从而避免使用 npm。

我知道我可以使用 Bower，它有一个扁平的依赖树 - 这可能是我应该深入的根 - 但我读过一些文章说“不需要 Bower - npm 可以做到这一切”，因此我会想知道是否有办法纯粹使用 npm 来做到这一点。

有办法吗？或者“npm 可以做到这一切”的声明是针对那些将require直接来自node_modules的组件？

TL DR;对于源文件和构建文件分离的 ASP .NET 5 项目来说，bower 是否比 npm 更适合？如果不是，那么纯粹使用 npm 的推荐方法是什么？

我并不专业地使用 grunt，但我自己使用它，我想我可以向您解释如何使用它来满足您的要求。

首先，您应该将“New Item”添加到您的项目中，选择“Client-Side”和“NPM Configuration file”来添加package.json到项目（在您所在的同一目录中）project.json）。我想您已经创建了该文件，但该文件的存在对于 grunt 也很重要。然后添加一些客户端需要的依赖项"dependencies"部分package.json并至少添加grunt and grunt-contrib-copy to "devDependencies"部分。您将在下面看到的文件示例

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "font-awesome": "^4.5.0",
    "jquery": "^1.11.3"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.7.0",
    "grunt-contrib-copy": "^0.8.2"
  }
}

现在您应该以与添加“NPM 配置文件”相同的方式添加“Grunt 配置文件”。你将创造gruntfile.js（在您所在的同一目录中project.json）。最后你应该填写gruntfile.js有更多有用的代码。例如代码

module.exports = function(grunt) {
    grunt.initConfig({
        clean: ["wwwroot/font-awesome/", "wwwroot/jquery*.*"],
        copy: {
            main: {
                files: [
                    {
                        src: "node_modules/font-awesome/css/*",
                        dest: "wwwroot/font-awesome/css/",
                        expand: true,
                        filter: "isFile",
                        flatten: true
                    },
                    {
                        src: "node_modules/font-awesome/fonts/*",
                        dest: "wwwroot/font-awesome/fonts/",
                        expand: true,
                        filter: "isFile",
                        flatten: true
                    },
                    {
                        src: "node_modules/jquery/dist/*",
                        dest: "wwwroot/",
                        expand: true,
                        filter: "isFile",
                        flatten: true
                    }
                ]
            }
        }
    });
    grunt.loadNpmTasks("grunt-contrib-clean");
    grunt.loadNpmTasks("grunt-contrib-copy");
    grunt.registerTask("all", ["clean", "copy"]);
    grunt.registerTask("default", "all");
};

注册两个任务：clean and copy和别名all and default。您可以选择gruntfile.js在解决方案资源管理器中打开文件，打开上下文菜单并选择“任务运行程序资源管理器”。您将看到所有已定义的任务。如果执行，将执行名称为“default”的任务grunt命令行中不带参数（不带任务名称）。

现在您可以选择某个任务并运行它。您可以选择某个任务，单击鼠标右键打开上下文菜单并选中“Bindings”中的“After Build”：

现在每次构建项目时都会执行该任务。您可以选择单击左侧的“V”按钮来查看已执行任务的详细信息。

我希望这已经是您需要的主要信息。有关插件的许多其他有用信息grunt-contrib-clean, grunt-contrib-copy, grunt-contrib-jshint, grunt-jscs, grunt-newer还有许多其他的，你会发现自己。值得一提的是 ASP.NET 5 文档的一个官方位置。它是这个地方 http://docs.asp.net/en/latest/client-side/using-grunt.html.

附：您还询问了凉亭的用法。我发现 npm 和 Bower 都不是完美的，但仍然很实用。我更愿意完全控制依赖关系，尤其是数据，这些数据将复制到wwwroot。因此我改变了内容.bowerrc文件来自{ "directory": "wwwroot/lib" } to { "directory": "bower_components" }我使用 grunt 从中复制所需的数据bower_components就像我对来自的文件执行此操作一样node_modules. See 文章 http://www.hanselman.com/blog/ControlHowYourBowerPackagesAreInstalledWithAGulpfileInASPNET5.aspx更多细节。换句话说，我使用仅在 Bower 存储库中发布的包，就像使用 npm 包一样。