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.

Answer 2

Grunt (and gulp) support is added in the next Visual studio. This is the javascript developers tools for doing the same thing - bundling for production.

Grunt can create a build version that is not minified for testing but minified for production. I might take some more time and effort but it is the future instead of the MS try they did with bundling. You can already use grunt if you have Node.js installed and be ready for the future.

There is plenty of getting started resource out there. See also Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

Answer 3

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

It's not your only option, but since you are working in the realm of MVC it's one of the better options. Since it is designed to be leveraged at different levels, such as individual pages as well as layouts, it will take care of generating the appropriate link.

In general, I would recommend you use a server side bundling framework oriented to MVC so that it can handle the link generation and gives you an intuitive API.

SquishIt is an open-source framework that integrates well with MVC, and is also capable of being switched based on criteria such as a debug flag to generate the original source versus minified versions.

Both SquishIt and the new builtin MVC bundles are fairly similar in terms of what they are meant to accomplish.