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