ASP .NET 5 - grunt task to copy files from node modules to wwwroot

Question

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?

Answer 1

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.