Automatically switching to minified CSS & JS files in different environments

Question

I am using ASP.Net MVC 5 and also taking advantage of WebEssentials LESS and bundle features.

WebEssentials is setup to create minified css and js files on save. This is a feature I want because I can monitor the output and it lowers the application startup time (not using Asp.Net MVC bundles).

How can I automatically get my app to use the minified version of the files when it is deployed without having to manually change the file names?

So, for example, from:

<link href="somestyles.css" .. > 

to:

<link href="somestyles-min.css" .. >

I did read that I could combine WebEssentials and Asp.Net MVC Bundles, providing I disabled the minification option in Asp.Net MVC Bundles. This would then substitute the MIN files in production (web.config [debug="false"]).

Is this my only option or is there a better way to achieve this?

Answer 1

This is definitely not the only way. Another way would be to completely disconnect all Microsoft-based tools (ie bundling, web essentials, etc) and use a Javascript Task Runner. Then the compiling of supersets and pre-processers, minification and whatever other front-end heavy lifting can be in one place. It can also be based on the environment.

So let's address some of your specific concerns.

Task running in the flavor of nodejs and gulp

1. Download nodejs

2. After downloading, open up a command prompt and navigate to your project source. For example:

   cd "C:\Users\beloud\Documents\Visual Studio 2013\Projects\YourProject"
   

3. Initialize a node project by running npm init. This will ask you a bunch of questions about your project. After completion, it will create a file, package.json, which will track your node dependencies and project details.

4. Now we need to install a few packages. In 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 a path for you). Then we install a handful of packages locally to our project that will be doing that actual work (minifying, processing, etc).

5. Create a file in the same directory as your package.json named gulpfile.js.

6. Now we need to create our actual 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'));
   });
   

7. Run gulp in command prompt. That will run the default task. Basically, it will look for any less files in all directories under Content/less, compile them to css, minify them if isDebug is false and output it to Content/css.

8. Let's make it a little bit more awesome by adding a watch. Add the following to gulpfile.js:

   gulp.task('watch', function() {
     // Watch .less files
     gulp.watch('Content/less/**/*.less', ['default']);
   });
   

   Upon running gulp, the task will stay alive until manually terminated. It will watch for changes made to any less file in Content/less and will re-run the task upon saved changes.

9. Now, you just need to include the name of the css file as it will remain the same, regardless of the environment.

This is a very basic example of using a task runner to achieve what you're trying to do. You can do a whole lot more with nodejs, gulp and everything else I've referenced. I would personally suggest this because, it is way more powerful than the one-off tools you're currently using and Visual Studio 2015 is already heavily relying on this new methodology so you'll most likely have to learn this anyways.

You can learn more by following this really amazing tutorial, Getting started with gulp, by Mark Goodyear.