So here's how to do it (compile on build and non-elegant compile on save):
Step 1
Open up your package.json
file (it's in the root of your project) and add these lines:
"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"
Obviously you can change the version numbers (you'll get helpful intellisense), these are just the current versions.
Step 2
Right-click on the NPM
folder (under Dependencies
) and click Restore Packages
. This will install less
and grunt-contrib-less
.
Step 3
Once those packages are restored, go to your gruntfile.js
file (again, in the root of the project). Here, you'll need to add the following section to grunt.initConfig
less: {
development: {
options: {
paths: ["importfolder"]
},
files: {
"wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
}
}
}
You'll also need to add this line near the end of gruntfile.js
:
grunt.loadNpmTasks("grunt-contrib-less");
Step 4
Then just go to View->Other Windows->Task Runner Explorer
in the menu hit the refresh icon/button, then right-click on less
under Tasks
and go to Bindings
and tick After Build
.
Hooray, now less files will compile and we (I) learned about grunt, which seems really powerful.
Step 5: Compiling on save
I still haven't got this working to my satisfaction, but here's what I've got so far:
As above, add another NPM package grunt-contrib-watch
(add to package.json, then restore packages).
Then add a watch section in gruntfile.js, like this (obviously this can work for other types of files as well):
watch: {
less: {
files: ["sourcefolder/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
}
So you'll now have something like this in your gruntfile.js:
/// <binding AfterBuild='typescript' />
// This file in the main entry point for defining grunt tasks and using grunt plugins.
// Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
watch: {
less: {
files: ["less/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
},
less: {
development: {
options: {
paths: ["less"]
},
files: {
"wwwroot/css/style.css": "less/style.less"
}
}
}
});
// This command registers the default task which will install bower packages into wwwroot/lib
grunt.registerTask("default", ["bower:install"]);
// The following line loads the grunt plugins.
// This line needs to be at the end of this this file.
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
};
One can then simply set this task to run on Project Open (right-click on watch
under Tasks
in the Task Runner Explorer
(it's under View->Other Windows
in the top menu) and you're done. I would expect you'd have to close and re-open the project/solution to get this to kick in, otherwise you can manually run the task.