Bundling, minification and client-side compilation
For the past couple of years, Web Essentials have been including features for bundling and minifying JS and CSS files as well as compiling LESS, Sass and CoffeeScript. As of Web Essentials 2015 that is no longer the case. However, I’ve gotten so many requests to bring these features back that I’ve created two new Visual Studio 2015 extensions to deal with it. And I need your help testing them before Visual Studio 2015 goes RTM.
Bundler & Minifier
This extension allows you to perform bundling and minification of JS, CSS and HTML files very easily and, in my mind, takes a better approach to how it’s done over the same feature in Web Essentials.
Download from VS Gallery Bundler & Minifier
Download nightly CI builds from vsixgallery.com
Source code on GitHub
Web Compiler
Based on what I learned building compilers for Web Essentials, this extension improves on the stability and usability significantly. You can now very easily specify which LESS/Sass/CoffeeScript files to compile and with what settings for each file individually.
Read more and download Web Compiler
Download nightly CI builds from vsixgallery.com
Source code on GitHub
Why new extensions?
In the past year or so, I’ve started separating out features from Web Essentials into smaller single-purpose extensions. I’ve done that for several reasons.
- It keeps the Web Essentials source code smaller and more maintainable
- Since it’s smaller, I hope to get more contributions from the community
- If one feature in Web Essentials cause a crash/hang, then the entire extension is broken
- Issues are much easier to deal with in smaller extensions
- By having smaller extensions, you can install just the ones you need
The code in Web Essentials for dealing with Bundling, minification and compiling was very error prone and almost impossible to maintain. For several months I wasn’t even able to compile Web Essentials itself due to a lot of weirdness in the node.js based compilers being used.
Help wanted
Given that these two extensions are brand new and the amount of requests for them has been so immense, it becomes really important that they both are working awesomely when Visual Studio 2015 goes RTM. So please help me test them out by installing them and reporting any issues to their GitHub issue tracker. If you want to contribute then you’re more than welcome to send pull requests with modifications and/or unit tests. If you want to add new features, all I ask is that you open an issue first so we can discuss it before sending the pull request.
These extensions are for a huge portion of Visual Studio web developers who don’t want to setup Grunt/Gulp to handle the client-side workflows, but instead have happily relied on Web Essentials in the past. These extensions are for you.
Comments
This is fantastic news. My fear was that WE would disappear with the loss of these features, but new, specialized extensions will make for an exciting future. I hope that the fruits of your efforts see major traction and get lots of community support (or integrated as a first-class citizen of VS itself).
JordanThank you for these extensions. I originally was using Web Essentials primarily for the minification of the JS.
AmirHey Mads, would be good to put a link through to their respective Github pages!
ChadThank you Mads for these extensions.
ManojMe personally, I took the jump to Gulp and I'm not looking back, especially with the new vso build tools that makes it easy to have them be part of my build. But for those that haven't, and don't want to, I suppose it would be really nice to have a tool that reads current mvc4 bundle configuration, and creates a bundleconfig.json for your bundler and minifier. Is that something that you think is in the scope of these tools?
MartijnSweet Jammy!
JackI love seeing these extensions broken out for maintainability, consume-ability and versioning. I would love even more if there continued to be a "roll up" extension that didn't contain any extensions in it per se.. but would pull in all of the Web Extensions family. Keep up the great work Mads!
Caleb Jenkins@Caleb, that's what I eventually hope to be able to do
Mads KristensenIt´s great consideration from your part. Since it just didn´t seem write to cut off something that what works really well, just because there´s something that works even better. I personally missed the preview window: which sometimes made me know that webessentials failed while compiling, when there weren´t any sensible errors in output... Great decision Mads!
Ahmed Alejo@Ahmed, the preview window is coming to the Web Compiler extension hopefully by the time Visual Studio RTMs
Mads Kristensen@Ahmed, the Error List integration is much much better in Web Compilers than it ever was in Web Essentials.
Mads Kristensen@Martijn, it could be done and i like that idea. It will be a bit tricky since BundleTable doesn't have an output file path
Mads KristensenWhat about tracking if original files have changed and serving updated bundle (the way it was prior VS2015)?
nadya@nadya, that is all supported by the two new extensions. Any change to the original file will compile, bundle and minify automatically.
Mads Kristensen@mads when i specified a outputFileName as "a/b/c.js" given that "a/" didn´t exist. i only got a messagebox(no detail in errorlist window) informing the error could be due to a format(bundleconfig) after a recent extension update. i quickly discarded this possibility due to the fact i only installed BundlerMinifier once, and i had used before with no problem. i created a pull request with a simple fix. https://github.com/madskristensen/BundlerMinifier/pull/16 this is also a issue with the WebCompiler. Great job @mads !!
Ahmed AlejoWhat about versioning to address browser caching (the way it was with old bundling)? I guess, gulp and all might be nice and gives lots of options and control, but we had a nice and easy bundling feature before and now we need around 5-6 tasks just to replicate the same behavior. May be if release VS2015 would include gulp file that has everything we already had ready for use(watching, bundling, minification, versioning), it would help with the transition to gulp (no pressure to learn gulp right away) and may be even eliminate the need for this extra extension.
nadya@Ahmed, this is now supported. Thanks for the pull request :) @nadya, that's a great idea
Mads KristensenComments are closed