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

Question

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

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

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

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

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

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

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

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

Answer 1

我没有在 grunt 中填满我的专业，但我自己使用它，我认为我可以向您解释如何根据您的要求使用它。

首先你应该在你的项目中添加“New Item”，选择“Client-Side”和“NPM Configuration file”添加package.json到项目(在您拥有 project.json 的同一目录中)。我想你已经创建了文件，但是文件的存在对于 grunt 也很重要。然后添加一些在客户端需要的依赖项到 "dependencies" package.json 的一部分并添加至少 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 .

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