Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IItemTransform and existing minified files

TL;DR: IItemTransform isn't getting executed when a minified file already exists in the same folder as the original (non-minified) file.

Problem explanation

I'm having this issue mainly because of CSS relative image references. If you used IItemTransform with Javascript files, the same applies.

This is what I'm using:

  1. I'm using Visual Studio with Web Essentials addin to have support for LESS files
  2. I'm writing LESS files and have Web Essentials addin automatically minify files on save
  3. I'm also using bundling and minification in my project
  4. When creating CSS bundles I'm using CssRewriteUrlTransform to make CSS URLs absolute (i.e. background images) so that images still work after bundling several CSS files together

Nothing unusual here so far, but it doesn't work.

What seems to be the problem?

The way that bundling and minification works is it tries to avoid excessive processing. This means that when a minified file exists in the same folder as the original one it won't run its own minification and rather serve existing file.

This would be all right as long as it would at least run transforms over those preexisting minified files. But it doesn't. So I end up with relative URLs in a bundle which breaks pretty much all those resources.

Workarounds

  1. Always provide absolute paths in LESS files
  2. Disable file minification on save in Web Essentials settings
  3. Refer to minified files when defining my bundles because they don't have a minified version (*.min.css doens't have a *.min.min.css) so minifier actually picks up the file and minifies while also running transformations over it.

From the standpoint of my development process and tools used (and configured the way they are) this looks like a bug. If those files would be the result of the same minification process this wouldn't be a bug at all as transformations would be executed when minification would execute. It's true that such functionality doesn't exist and likely never will as app would need write permissions to make it work. Outcome: this is a bug. Existing minified files should be processed through transformations before being cached.

Question

Is it possible to somehow convince bundling and minification to either:

  1. not use existing minified file versions
  2. run transformations over existing minified versions
like image 487
Robert Koritnik Avatar asked Mar 04 '14 18:03

Robert Koritnik


People also ask

What is difference between bundling and minification?

Both bundling and minification are the two separate techniques to reduce the load time. The bundling reduces the number of requests to the Server, while the minification reduces the size of the requested assets.

How to use bundling and minification in MVC 5?

Bundling and minification can be enabled or disabled in two ways: either setting the value of the debug attribute in the compilation Element in the Web. config file or setting the enableOptimizations property on the BundleTable class. In the following example, debug is set to true in web.

What is bundling in. NET?

Bundling allows us to load the bunch of static files from the server in a single HTTP request. The following figure illustrates the bundling technique: Loading script files in separate requests. In the above figure, the browser sends two separate requests to load two different JavaScript file MyJavaScriptFile-1.

What is minification in ASP NET?

Minification is the process of the removal of all unnecessary characters, like extra spaces, comments, newlines, and so on, that have been added for readability, from files to reduce the size of files so that the data transfer can be minimized.


1 Answers

Have you considered using Grunt? http://gruntjs.com/

It has a learning curve, but, the information pool is huge. The issues that you are having with web essentials wouldn't be a problem with grunt.

I'm using it in VS, now, to minify, bundle and transpile both css and javascript as well as reorganize files into a deployment directory. Once you've set up a directory structure, a grunt file could very easily be reused.

With the add-on in VS (linked, below), you can right click on the grunt file and select the grunt tasks to run from a popup menu.

https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff

Grunt "tasks" as they are called can be created by downloading various plugins i.e. https://www.npmjs.com/package/grunt-contrib-less.

like image 115
Lee Duckworth Avatar answered Sep 28 '22 13:09

Lee Duckworth