Ok, so how did css become so complex and what the heck is Grunt? Grunt is a task runner.  There are a number of open source task runners.  Grunt is just one of the more popular ones.  In our scenario we will be using Grunt (a task runner) to convert less into css as well as to uglify and minify and copy files to different directories.

The following are steps that I recently used to setup our environment to edit the most recent release of Bootstrap (3.x) while taking advantage of all the existing Less files.  Grunt will automate a number of tasks for us.  In addition the details below will setup a Visual Studio 2013 environment to use Grunt to build and deploy our Bootstrap files.

1.) Create Empty MVC project

2.) Include bootstrap files into project (all folders and files when unzipping bootstrap source) i.e. dist, docs, fonts, grunt, js, less etc. Note: do not include node_modules  I had issues with long path with one of the node modules (besides these will be downloaded automatically after install)

3.) Ensure you have node.js installed on your workstation.   Node what is node…is a open source cross-platform environment for easily building fast, scalable network applications.  Node.js applications are written in JavaScript and can be run within the runtime on OS X, Windows, Linux etc.  However in our usage we will be using this platform to download install other JavaScript applications.

4.) Open a command prompt to your project location and run > npm install (this will read the grunt packages json file and download necessary modules).  As information, npm is short for Node Package Manager.  NPM is to Node as Nuget is to Visual Studio.  That is a good way of thinking about it.

5.) At the command prompt > grunt (this will execute all tasks and run the tests)

6.) Now the task is to get grunt to run upon project building (yes we are wanting to automatically run grunt after we build the empty mvc project within vs.net).  Download and install the Web Essentials extension from the gallery.

7.) Download install the Task Runner Explorer extension as well.

8.) Open the MVC project and right click on Gruntfile.js  You will see a new option.

9.) Add dist to the after build task (you can do this by dragging to the after build folder).  This will connect grunt to run dist task after vs.net builds.

10.) Now after I build my project, what I want is for grunt to build the css based on the less, the copy the output to a particular directory on my pc.
At this point, I opened gruntfile.js.  I am going to extend the current copy task to include a copyToServer option.

copy: {
  fonts: {
    expand: true,
    src: 'fonts/*',
    dest: 'dist/'
  },
  docs: {
    expand: true,
    cwd: 'dist/',
    src: [
      '**/*'
    ],
    dest: 'docs/dist/'
  },
 copyToServer: {
      expand: true,
      cwd: 'dist/',
      src: ['**/*'],
      dest: 'c:/inetpub/wwwroot/server/stylesheets/bootstrap/'
  }
},  

I also added a new task so that I could execute this after a build with

// new copy to server or local vdir   grunt.registerTask('copyToServer', ['copy:copyToServer']);

Finally, I am going to add this task to the after build step, so every time Visual Studio builds, it will execute Grunt to build the css via Less then it will copy the files to a particular directory after I build my Visual Studio project.  You can do this by right clicking on the copyToServer task and select After Build binding.