This is definitely not the only way. Another way would be to completely disable all Microsoft-based tools (e.g., binding, web components, etc.) and use the Javascript Task Runner. Then compilation of supersets and preprocessors, minimization, and any other external heavy lifting can be in one place. It can also be environment based.
So let me touch on some of your specific issues.
Task done in the style of nodejs and gulp
- Download nodejs
After downloading, open a command prompt and go to the project source. For instance:
cd "C:\Users\beloud\Documents\Visual Studio 2013\Projects\YourProject"
Initialize the node project by running npm init . This will ask you a bunch of questions about your project. Upon completion, it will create a package.json file that will track your node dependencies and project details.
Now we need to install several packages. At the command prompt, enter the following commands:
npm install gulp -g npm install gulp --save-dev npm install gulp-less --save-dev npm install gulp-minify-css --save-dev npm install gulp-if --save-dev
We install gulp globally, so we can use it anywhere (it will add you a path). Then we install several packages locally in our project, which will do this actual work (minimization, processing, etc.).
Create a file in the same directory as your package.json named gulpfile.js .
Now we need to create our urgent tasks. In gulpfile.js add the following:
//these are the modules that we'll be using in our task var gulp = require('gulp'), less = require('gulp-less'), gulpif = require('gulp-if'), minifycss = require('gulp-minify-css'); var isDebug = true; // I usually have a config.js file that has this and some handy static paths that I'll be referencing regularly. Then I just require it above. gulp.task('default', function() { return gulp.src('Content/less/**/*.less') .pipe(less()) .pipe(gulpif(isDebug === false, minifycss())) //the first argument is the condition, the second is the method to call if the condition is true .pipe(gulp.dest('Content/css')); });
Run gulp at the command prompt. This will launch the default task. Basically, he will look for less and less files in all directories under Content/less , compile them in css, minimize them if isDebug is false and output it to Content/css .
Let me make it a little more amazing by adding a watch. Add the following to gulpfile.js :
gulp.task('watch', function() {
When gulp starts, the task will remain valid until it is completed manually. It will monitor the changes made to any file in Content/less , and will restart the task when the changes are saved.
Now you just need to specify the css file name, as it will remain unchanged regardless of the environment.
This is a very simple example of using a task runner to accomplish what you are trying to do. You can do a lot more with nodejs, gulp and everything else that I referenced. I personally would suggest this because it is much more efficient than the one-time tools you are currently using, and Visual Studio 2015 already relies heavily on this new methodology, so you will likely have to find out all this.
You can learn more by following this truly amazing guide, Getting Started with gulp , Mark Goodyear .