Using Grunt grunt-contrib-less) to compile Bootstrap 3.1 LESS in Visual Studio 2013

Question

I used the following build event in Visual Studio 2013 to compile Bootstrap 3.0 with a break according to this answer and worked

recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css" 

Now this does not work for Bootstrap 3.1.1, and they say Grunt will do it, I tried:

 grunt-contrib-less "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css" 

But he cannot make it work. Any ideas on how to get Grunt to work with VS 2013.

Note. I installed Node.js and cut earlier, then> npm install grunt-contrib-less, and then of course> npm update grunt-contrib-less.

Answer 1

This works for me a little differently:

• Make sure you have grunt-cli installed globally ( npm install -g grunt-cli )
• Create Gruntfile.js in your project or solution and define a goal to do all that less is required to compile (for example, less).
• Add call grunt less to your pre-build event (if you don't specify CALL then the process will not return after grunting)

You can add various goals to the development and production processes if you wish. You can also set more goals for other tasks - I have one, so I can run grunt watch to automatically recompile my CSS if I edit fewer files.

Step-by-step tutorial on how to convert the VS2013 sample design to use less and Grunt:

• Remove the boot tray and install bootstrap less:

   Uninstall-Package bootstrap Install-Package Twitter.Bootstrap.less 

• Open command prompt and cd in project directory

• Make sure grunt-cli is installed globally:

   npm install -g grunt-cli 

• Create the package.json file:

   npm init 

• Install grunts and not interfere locally: npm install grunt grunt-contrib-less`

• Create a file in your project called Gruntfile.js with the following contents:

   module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), less: { dev: { options: { sourceMap: true, dumpLineNumbers: 'comments', relativeUrls: true }, files: { 'Content/bootstrap.debug.css': 'Content/bootstrap/bootstrap.less', } }, production: { options: { cleancss: true, compress: true, relativeUrls: true }, files: { 'Content/bootstrap.css': 'Content/bootstrap/bootstrap.less', } } }, }); grunt.loadNpmTasks('grunt-contrib-less'); // Default task(s). grunt.registerTask('default', ['less']); grunt.registerTask('production', ['less:production']); grunt.registerTask('dev', ['less:dev']); }; 

• Edit the Visual Studio Prebuild Event to enable:

   cd $(ProjectDir) call grunt --no-color 

  ( --no-color removes some control characters from the assembly of the Visual Studio assembly)

• Create your project, then turn on the display of all files and include the two compiled css files in your project (so that the web deployment picks them up).