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

【问题标题】：ASP .NET 5 - grunt task to copy files from node modules to wwwrootASP .NET 5 - 将文件从节点模块复制到 wwwroot 的 grunt 任务
【发布时间】：2016-03-31 01:25:24
【问题描述】：

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

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

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

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

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

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

有办法吗？或者“npm can do it all”声明是针对那些直接来自node_modules的require组件的项目？

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

【问题讨论】：

您没有为我的回答写任何 cmets。您是否尝试使用我的建议？您主要希望将一些文件（例如，jquery.min.js）从 node_modules 文件夹复制到 wwwroot 文件夹中。你现在能做到吗？如果您想获得更多信息，您应该提出更多问题。 grunt 或gulp 允许您完全控制放置在wwwroot 中的文件，但仍然可以轻松地复制带有文件的整个目录。如果您有一些未解决的问题，最好在那里提问。
感谢您的回答 Oleg，虽然它很好地解释了如何使用 grunt，但它并没有回答我的问题。为我想使用的每个单独的包编写任务或任务的一部分比下载并手动放置它们更难、更多工作和更复杂。
我想要的是 1 个任务，它将复制必要的文件——包括我在编写任务后使用 npm 获得的包中的任何新文件。我倾向于使用 bower，或者 npm 和 requirejs。
您可以将整个node_modules复制到wwwroot以及所有子目录（您需要使用相应的选项，删除flatten: true，filter: "isFile"，...，请参阅选项here），但这是不推荐的方式。因为您以 anything 的方式放置在您的页面上。您可能会遇到安全问题（一个人可以入侵您的网站）和法律问题（您可以放置非法内容并且可能需要为此付费）。我会严格控制您在网站上放置的内容。
我支付了一次 6000 欧元，因为有人从某个地方修改了两张 jpg，我只是将这两张图片放在我的网站上，而没有准确检查图片的来源。直到我收到一位律师的来信，提出了金钱索赔，我才知道这件事。在历史记录之后，我想完全控制我网站的所有内容。你可以信任你在 npm 上找到的每一个包，但是，从法律的角度来看，你将负责你页面的内容，而不是你从未见过的一些不清楚的作者的 node/npm。

标签： gruntjs npm bower asp.net-core node-modules

【解决方案1】：

grunt 我并不专业，但我自己使用它，我认为我可以向您解释如何根据您的要求使用它。

首先你应该在你的项目中添加“New Item”，选择“Client-Side”和“NPM Configuration file”将package.json添加到项目中（在你拥有project.json的同一目录中） .我想你已经创建了文件，但是文件的存在对于 grunt 也很重要。然后添加一些依赖项，在客户端需要这些依赖项到 package.json 的 "dependencies" 部分，并至少将 grunt 和 grunt-contrib-copy 添加到 "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 和 copy 以及别名 all 和 default。您可以在解决方案资源管理器中选择gruntfile.js 文件，打开上下文菜单并选择“Task Runner Explorer”。您将看到所有已定义的任务。如果在命令行中不带参数（不带任务名称）执行grunt，将执行名称为“default”的任务。

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

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

我希望这已经是您需要的主要信息。关于插件grunt-contrib-clean、grunt-contrib-copy、grunt-contrib-jshint、grunt-jscs、grunt-newer 以及许多其他有用的信息，您会发现自己。应该提到 ASP.NET 5 文档的一个官方位置。我是the place。

附：您还询问了凉亭的用法。我发现 npm 和 bower 都不完美，但仍然非常实用。我更愿意完全控制依赖关系，尤其是数据，这些数据将在wwwroot 下复制。因此，我将.bowerrc 文件的内容从{ "directory": "wwwroot/lib" } 更改为{ "directory": "bower_components" }，并使用grunt 从bower_components 复制所需数据，就像我对node_modules 中的文件执行此操作一样。有关详细信息，请参阅the article。换句话说，我使用仅在 bower 存储库中发布的包，就像我使用 npm 包一样。

【讨论】：