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

Question

我有一个简单的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执行此操作的建议方法是什么？ / p>

Answer 1

我不会把我当成专业人员，但是我自己使用它，我认为我可以解释你如何使用它符合你的要求。

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

grunt-contrib-copy

现在您应该像添加“NPM配置文件”一样添加“Grunt配置文件”。您将创建"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" } } 的同一目录中）。最后，您应该使用更有用的代码填充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（没有任务名称），则将执行名为“default”的任务。

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

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

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

P.S。你还问了一下凉亭的用法。我发现npm和bower都不完美，但仍然非常实用。我希望完全控制依赖关系，特别是关于数据，这些数据将在grunt-jscs下复制。因此，我将grunt-newer文件的内容从wwwroot更改为.bowerrc，并使用grunt从{ "directory": "wwwroot/lib" }复制所需数据的方式与我执行此操作的方式相同{ "directory": "bower_components" }。有关详细信息，请参阅the article。换句话说，我使用仅在bower存储库中发布的包，就像我使用npm包一样。