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的推荐方法是什么？

Answer 1

我不会把我当成专业的咕噜咕噜,但我自己用它,我想我可以解释你如何使用它符合你的要求.

首先,您应该在项目中添加"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在解决方案资源管理器中选择文件,打开上下文菜单并选择"任务运行器资源管理器".您将看到所有已定义的任务.如果grunt在命令行中没有参数(没有任务名称)执行,则将执行名为"default" 的任务.

现在您可以选择一些任务并运行它.您可以选择一些任务,单击鼠标右键打开上下文菜单,然后选中"Bindings"中的"After Build":

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

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

PS你还问了一下凉亭的用法.我发现npm和bower都不完美,但仍然非常实用.我宁愿完全控制依赖关系,特别是关于将被复制的数据wwwroot.因此,我将.bowerrc文件的内容更改为{ "directory": "wwwroot/lib" },{ "directory": "bower_components" }并使用grunt 以与我使用的文件bower_components相同的方式复制所需的数据node_modules.有关详细信息,请参阅文章.换句话说,我使用仅在bower存储库中发布的包,就像我使用npm包一样.