CODEWITHSUNDEEP
csstwitter-bootstrap-3visual-studio-2013lessgruntjs
hsobhy
hsobhy

Reputation: 1523

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

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.

Upvotes: 4

Views: 6962

Answers (1)

Richard
Richard

Reputation: 30618

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:

  1. Remove bootstrap and install bootstrap less:

    Uninstall-Package bootstrap
Install-Package Twitter.Bootstrap.less
  2. Open a command prompt and cd to your project directory

  3. Ensure grunt-cli is installed globally: 

    npm install -g grunt-cli

  4. Create a package.json file: 

    npm init
  5. Install grunt and grunt-contrib-less locally: npm install grunt grunt-contrib-less`

  6. 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']);
};

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

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

Upvotes: 5

Related Questions