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

Question

I used the following as pre-build event in Visual Studio 2013 to compile Bootstrap 3.0 with recess according to this answer and it worked

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

Now this doesn't work for Bootstrap 3.1.1 and they say Grunt will do it. I've tried:

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

But can't get it to work. Any ideas how to get Grunt to work with VS 2013.

Note: I've Installed Node.js and recess earlier, then > npm install grunt-contrib-less then to be sure >npm update grunt-contrib-less.

Richard · Accepted Answer · 2014-03-23T10:16:15.210

5

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).

edited Mar 23 '14 at 10:16

answered Mar 23 '14 at 04:53

Richard

29,854
11
77
120

Thanks @Richard, since I'm not that familiar with the issue, do you think the same pre-build event will work? any idea if another or resources / examples? – hsobhy Mar 23 '14 at 04:58
2

There is no program called `grunt-contrib-less` - it's a node module and must be executed through that. The easiest way is to define your tasks in the Gruntfile.js - see the [Grunt-contrib-less page](https://github.com/gruntjs/grunt-contrib-less) guide for an example of what goes in this file. You will then need to modify your pre-build event to my example above. – Richard Mar 23 '14 at 05:05
I've added a complete walkthrough to convert the Visual Studio starter project to using less with grunt to compile it. Hopefully you can adapt this to your needs. – Richard Mar 23 '14 at 05:28
oh, really thankful for your effort .. will try it and let you know. BTW, I found that VS WebEssentials do it with just save the less but not sure yet with the result. – hsobhy Mar 23 '14 at 06:00
I did the steps, now I have the package.json and the js on root .. node_modules has grunt and grunt-contrib-less .. build returns The command "cd D:\BootStrap\ call grunt --no-color" exited with code 1. BootStrap – hsobhy Mar 23 '14 at 06:30
Is there anything special required for the package.json? – hsobhy Mar 23 '14 at 06:31
1

There was supposed to be a linebreak between the cd command and the call grunt command in the prebuild event. – Richard Mar 23 '14 at 09:08
YESSSSSS .. worked .. thanks @Richard .. that was very clear and helpful really – hsobhy Mar 23 '14 at 10:14
BTW @Richard, I searched a lot for such guide for people with Grunt knowledge-less like me and couldn't find .. wish someone add this as tutorial somewhere. – hsobhy Mar 23 '14 at 10:21
If you, like me, use tools like grunt/gulp/bower/ or whatever external tool in Visual Studio, you end up wanting it to be tightly integrated with your solutions. For this, I wrote a scratch-my-own-itch package called VsCommandBuddy. It does the job!! Have a look: http://visualstudiogallery.msdn.microsoft.com/f5da988e-2ec1-4061-a569-46d09733c668 I hope it helps! – Paul0515 Jul 15 '14 at 09:49

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

1 Answers1

Linked