Using Grunt Grunt-Contrib-Less) for Compiling Bootstrap 3.1 Less in Visual Studio 2013

Using Grunt grunt-contrib-less) for compiling Bootstrap 3.1 LESS in Visual Studio 2013

I've got this working in a slightly different way:

Ensure you've got grunt-cli installed globally (npm install -g grunt-cli)
Create a Gruntfile.js in your project or solution, and define a target to do whatever less compiling you want (e.g. less)
Add call grunt less to your pre-build event (if you don't specify CALL, then the process doesn't return after grunt)

You can add different targets to the development and production build processes if you like. You can also set up more targets for other tasks - I have one so I can run grunt watch to automatically recompile my CSS if I edit less files.

Step-by-step guide to converting the VS2013 sample project to use less and Grunt:

Remove bootstrap and install bootstrap less:

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

Open a command prompt and cd to your project directory
Ensure grunt-cli is installed globally:
```
npm install -g grunt-cli
```
Create a package.json file:
```
npm init
```
Install grunt and grunt-contrib-less 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 your Visual Studio pre-build event to include:
```
cd $(ProjectDir)
call grunt --no-color
```
(--no-color removes some of the control characters from the Visual Studio build output)
Build your project, then enable show all files, and incldue the two compiled css files in your project (so that web deploy picks them up).

Grunt - Unable to compile less to css using grunt-contrib-less

Haha :)

rename your "less" task to different name like myLess, as it is running the main less tasks, so it is creating infinite loop

https://github.com/gruntjs/grunt-contrib-less/issues/279

How to compile Bootstrap LESS source in VS 2013

For the record the current Web Essentials will re-compile any compiled files when edits occur, including non CSS generating files like variables.less. You just need to manually edit them the first time to put them into this mode. For example the procedure for new projects which want to re-brand Bootstrap variables is:

Make sure the current Web Essentials Visual Studio package is installed.
Add the Bootstrap Source NuGet package to the site.
Manually edit the files you want automatically generated normally, e.g. /Content/bootstrap/bootstrap.less and theme.less. When you save the first compilation will occur, generating .css and min.css as related items in the Solution Explorer.
Now when you edit related files (e.g. variables.less to do branding) the compiled bootstrap and theme CSS is automatically updated during build.

The only dirty part about this is the first time you have to edit the original source, changing the timestamp. Hopefully that does not cause problems with updates to the NuGet package in the future.

There is an open issue in the Web Essentials project about this. One simple solution is to get the context menu option to do it manually the first time, the other is a permanent setting on the file in Visual Studio, such as the build action or custom tool action.

https://github.com/madskristensen/WebEssentials2013/issues/1632

You can change the behaviour of recompilation in the Visual Studio "Tools - Options - Web Essentials - LESS" settings.

LESS Loop error when using Grunt + Bootstrap 3

The error is because of the following lines:

.testi-square:nth-of-type(@{n + 1}) {order: (@i + 1);}
.testi-square:nth-of-type(@{n + 2}) {order: (@i + 2);}

When the compiler encounters the @{n + 1}, it would be looking for a variable named n + 1. You don't have any such variables named n + 1 (and it is not valid syntax either). So, it would result in compilation error. The fix would be to use something like this:

@loop-start: 1;
@loop-end: 20;
.loop(@n, @i) when (@n =< @loop-end) {
  .testi-square:nth-of-type(@{n}) {order: (@i);}
  @temp: @n + 1;
  .testi-square:nth-of-type(@{temp}) {order: (@i + 1);}
  @temp2: @n + 2;
  .testi-square:nth-of-type(@{temp2}) {order: (@i + 2);}

  .loop((@n + 3), (@i + 6)); // next iteration
}
.loop(@loop-start, @loop-start); // launch the loop

As stated by seven-phases-max in his comment, we can't use expressions, function calls etc within selector interpolation. Only variables are allowed.

Grunt recess - how to check less

Correct answer but unfortunately no solution:

"Well, in short: recess does not really lints Less code but instead it
actually checks the CSS compiled from it. Hence it doesn't complain of
missing ; and blank lines simply because compiled CSS do not have
those. (And answering your next question: No, there're no "real" Less
linting tools, all existing tools declaring themselves as such
actually lint compiled CSS result instead)."
- seven-phases-max

How to compile Twitter Bootstrap 3.0 LESS using Asp.net MVC 5 and Web Essentials 2013

UPDATE (29-SEP-2015):

Leave Web Essentials and use LESS Compiler along with its Clean CSS Plugin.

Download and install Node.js (32-bit) for Windows.
Open node.js command prompt.
Install LESS using the command: npm install -g less
Install less-plugin-clean-css using the command: npm install -g less-plugin-clean-css
Go to Project Properties > Build Events and copy-paste below command to Pre-build event command line box:

lessc "$(ProjectDir)Content\bootstrap\bootstrap.less" "$(ProjectDir)Content\bootstrap.css" --clean-css="--s1 --advanced"
Build the project and look for bootstrap.css at the specified location. (If not already, you may need to enable “Show All Files” settings in the Solution Explorer.)
Include the bootstrap.css file into your project. View file properties and set its “Build Action” to “Content”. Update BundleConfig to include this compiled file into your StyleBundle.
Select all .less files from \Content\bootstrap folder. View file properties and set its “Build Action” to “None”.

UPDATE (24-SEP-2014):

Since Twitter Boostrap has switched from RECESS to Grunt, I would recommend the new users looking for this solution to consider:
LESS Compiler or Grunt.

Please note that none of the solutions mentioned here use Web Essentials 2013.

Finally, I decided to use RECESS recommended by Twitter. If you want to use pre-built bootstrap 3 less into css using Visual Studio 2013 (RC / RTM), you can follow the steps given below:

Download and install Node.js (32-bit) for Windows.
Install RECESS npm package globally – Open node.js command prompt and run the command:

npm install recess –g
Use NuGet Library Package Manager and install the Bootstrap Less Source 3.0.0 package to your Asp.Net MVC 5 Web / Azure Web Role project.
Go to Project Properties > Build Events and copy-paste below command to Pre-build event command line: box:

recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
Build the project and look for bootstrap-compiled.css at the specified location. (If not already, you may need to enable “Show All Files” settings in the Solution Explorer.)
Include the bootstrap-compiled.css file into your project. View file properties and set its “Build Action” to “Content”. Update BundleConfig to include this compiled file into your StyleBundle.
Select all .less files from \Content\bootstrap folder. View file properties and set its “Build Action” to “None”.

Using Grunt Grunt-Contrib-Less) for Compiling Bootstrap 3.1 Less in Visual Studio 2013