ASP.net 5 - grunt任务将文件从节点模块复制到wwwroot [英] ASP .NET 5 - grunt task to copy files from node modules to wwwroot

问题描述

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

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

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

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

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

我知道我可以使用bower，它有一个平坦的依赖树 - 这可能是根本我应该去 - 但我读过一些文章，说没有必要bo wer - npm可以做到这一切，因此我想知道是否有一种方法可以纯粹使用npm。

有没有办法？或者是npm可以做到这一切的声明针对那些要求直接来自node_modules的组件的项目？

<对于使用源文件和构建文件分离的ASP .NET 5项目来说，它比npm更适合使用，如果不是，纯粹使用npm的建议方法是什么？

解决方案

我不会满足于专业人士的咕噜声，但我自己使用它，我认为我可以向您解释如何使用它符合您的要求。

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

$ b

  {
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 *。*]，
副本：{
 main：{
 files：[ 
 {
 src：node_modules / font-awesome / css / *，
 dest：wwwroot / font-awesome / css /，
展开：true，
 filter：isFile，
 flatten：true 
}，
 {
 src：node_modules / font-awesome / fonts / *，
 dest： wwwroot / font-awesome / fonts /，
展开：true，
过滤器：isFile，
 flatten：true 
}，
 {
 src：n ode_modules / jquery / dist / *，
 dest：wwwroot /，
展开：true，
过滤器：isFile，
 flatten：true 
} 
] 
} 
} 
}）; 
 grunt.loadNpmTasks（grunt-contrib-clean）; 
 grunt.loadNpmTasks（grunt-contrib-copy）; 
 grunt.registerTask（all，[clean，copy]）; 
 grunt.registerTask（default，all）; 
}; 
  

记录了两项任务： clean 和 copy 和别名全部和默认。您可以在解决方案资源管理器中选择 gruntfile.js 文件，打开上下文菜单并选择Task Runner Explorer。您将看到所有已定义的任务。如果您在命令行中执行 grunt 且没有参数（没有任务名称），那么名称为default的任务将被执行。

现在您可以选择一些任务并运行它。您可以选择一些任务，单击鼠标右键打开上下文菜单，并在绑定中选中生成后：

。

PS您另外询问了有关凉亭的用法。我发现npm和bower都不完美，但仍然非常实用。我宁愿完全控制依赖关系，特别是关于数据，这些数据将在 wwwroot 下复制。因此，我将 .bowerrc 文件的内容从 {directory：wwwroot / lib} 更改为 {directory：bower_components} 我使用grunt从 bower_components 复制所需的数据，就像我一样使用 node_modules 中的文件做到这一点。有关更多详细信息，请参见文章。换句话说，我像使用npm包一样使用只发布在bower仓库中的软件包。

I have a simple ASP .NET 5 empty project - with npm and grunt installed.

I've used npm to install a few client-side libraries, at present located in the node_modules directory directly under my ASP .NET project.

I want to copy the relevant files (for example, jquery.min.js) from the node_modules folder into the wwwroot folder.

It's unclear to me how to use grunt to do this - as each node module has it's own dependency tree, and there doesn't seem to be any consistency in the file structure from package to package.

I could write a grunt task explicitly for each client side library I use, but in that case I may as well download everything manually and place the files where I need them manually, avoiding npm all together.

I know I could use bower, which has a flat dependency tree - which is probably the root I should go down - but I've read a few articles saying "there's no need for bower - npm can do it all" and therefore I would like to know if there's a way to do this purely with npm.

Is there a way? Or is the "npm can do it all" statement aimed at projects that will require the components directly from the node_modules?

TL DR; Is bower a better fit than npm for ASP .NET 5 projects with separation of source and build files, and if not, what's the recommended way of doing it purely with npm?

解决方案

I don't fill me professional in grunt, but I use it myself and I think that I can explain you how one can use it corresponds to your requirements.

First of all you should add "New Item" to your project, choose "Client-Side" and "NPM Configuration file" to add package.json to the the project (in the same directory where you have project.json). I suppose you have already created the file, but the existence of the file is important for grunt too. Then you adds some dependencies, which you need on the client-side to "dependencies" part of package.json and add at least grunt and grunt-contrib-copy to "devDependencies" part. An example of the file you will see below

{
  "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"
  }
}

Now you should add "Grunt Configuration File" in the same way like you added "NPM Configuration file". You will create gruntfile.js (in the same directory where you have project.json). Finally you should fill gruntfile.js with more helpful code. For example the code

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");
};

registers two tasks: clean and copy and the aliases all and default. You can select gruntfile.js file in the solution explorer, open context menu and choose "Task Runner Explorer". You will see all defined tasks. The task with the name "default" will be executed if you execute grunt without parameters (without the task name) in the command line.

Now you can choose some task and run it. You can choose some task, click right mouse button to open context menu and check "After Build" in "Bindings":

Now the task will be executed every time when you build the project. You can click optionally "V" button on the left side to see verbose information from the executed tasks.

I hope it's already the main information which you need. Many other helpful information about plugins grunt-contrib-clean, grunt-contrib-copy, grunt-contrib-jshint, grunt-jscs, grunt-newer and many other you will find yourself. One official place of ASP.NET 5 documentation should be mentioned. It's the place.

P.S. You asked additionally about the usage of bower. I find both npm and bower not perfect, but still very practical. I would prefer to hold full control over the dependencies and especially about the data, which will be copied under wwwroot. Thus I change the content of .bowerrc file from { "directory": "wwwroot/lib" } to { "directory": "bower_components" } and I use grunt to copy the required data from bower_components in the same way like I do this with files from node_modules. See the article for more details. In other words I use packages published only in bower repository in the same way like I use npm packages.

这篇关于ASP.net 5 - grunt任务将文件从节点模块复制到wwwroot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！