17 Comments

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.

  1. It keeps the Web Essentials source code smaller and more maintainable
  2. Since it’s smaller, I hope to get more contributions from the community
  3. If one feature in Web Essentials cause a crash/hang, then the entire extension is broken
  4. Issues are much easier to deal with in smaller extensions
  5. 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.

2 Comments

Update: See this new blog post for how to apply the Intellisense to both Visual Studio 2013 and 2015

The latest release of Web Essentials 2015 provides Intellisense for GruntFile.js and GulpFile.js. For Gulp it just works out of the box, but for Grunt we have to add a little JSDoc comment to our file for Intellisense to light up.

For Grunt, just add this JSDoc comment on top of the module.export line:

/**
* @param {Grunt} grunt
*/
module.exports = function(grunt) {…

The JSDoc comment instructs the JavaScript Intellisense engine that the grunt parameter is of type Grunt which is specified by Web Essentials.

JSDoc comments are now natively supported in Visual Studio 2015

Here’s a video showing the feature for both Gulp and Grunt.


I hope to be able to remove the requirement on the JSDoc comments, so that Intellisense will just work without you having to do anything.

11 Comments

tl;dr

You need to update Web Essentials 2013 to version 2.2. If not, Visual Studio will crash. Download now.

Before Visual Studio 2013 Update 3

The upcoming release of Visual Studio Update 3 has API changes in some of the components that Web Essentials is extending. Those changes are not compatible with the current version of Web Essentials and will cause VS to crash after upgrading to Update 3. To be fair, those APIs were never public to begin with, so I was taking a chance when I was using them in Web Essentials.

If you are currently using Web Essentials 2.1 for Visual Studio Update 2, you should see this dialog show up the next time you open Visual Studio.

Web Essentials update notification

This is the first time this notification feature has been used after introducing it in Web Essentials 2.1. Good thing we did.

It’s important that you install this update immediately. You don’t have to restart Visual Studio – it’s enough that you just install the update. If not, you might forget to do it before you install Visual Studio Update 3. So go do it now.

It turns out to be good timing, since we have added some cool new features in version 2.2. Here’s a list of a few of them:

This is unfortunately the price we have to pay to be on the cutting edge. Lesson learned and we’ll do our best to make sure this doesn’t happen again. It’s not a guarantee since Web Essentials will continue to use APIs that are unsupported by Microsoft. That’s the only way we can add all those cutting edge features.

Download Web Essentials 2.2

4 Comments

web essentials3rd-party extensions have never been supported in the free Visual Studio Web Express. So you haven’t been able to install Web Essentials on Web Express before. With Visual Studio 2013 Update 2 and Web Essentials 2013 version 2.1 that is no longer the case.

You can now install and use Web Essentials on Web Express and get the exact same features as you would on the paid versions of Visual Studio. It’s the same code that runs in both. In fact, it’s the exact same extension that runs in both.

The reason for opening up Web Express for Web Essentials is to be able to provide cutting edge web tooling for free to anyone interested. Since Web Essentials is the ASP.NET and Web Tools Team’s official unofficial playground, we thought it would make perfect sense to broaden the support to the free versions of Visual Studio.

8 Comments

Earlier this week we shipped Visual Studio 2013 Update 2 CTP 2. Gotta love that name. The previous CTP 1 release didn’t contain any web specific features, but CTP 2 is packed with web goodness. Here are some of the highlights:

  • Improvements to the LESS editor
    • Nested media queries
    • Named parameters
    • Selector interpolation
    • Go to definition for variables, mixins and @import
    • Many additional tweaks and fixes
  • A brand new SCSS editor
    • With all the bells and whistles you’d expect
  • A brand new JSON editor
    • Basic editor features. More to come in the final release
  • Knockout.js Intellisense updates
    • Nested view model support
    • KO comments
    • Fixes and tweaks
  • New URL picker for HTML, CSS, LESS and SCSS
  • Browser Link updates
    • HTTPS support
    • Static HTML source mapping
    • SPA support for mapping data
    • Auto-update mapping data
  • General updates, tweaks and fixes

Even though the release is “just” a CTP, all these features are very solid and of high quality. I can only recommend giving CTP 2 a try if you haven’t already. There is so much web development awesomeness in it.

Web Essentials doesn’t work with CTP 2

That’s right, Web Essentials 1.9 and earlier doesn’t work with CTP 2 due to API changes in Visual Studio. If you install Web Essentials on CTP 2 you will be greeted with this nice error message:

editorextensionspackage

The ‘EditorExtensionsPackage’ package did not load correctly. This makes little sense to most people, since it’s not very clear what EditorExtensionsPackage is. Well, it’s the original name of Web Essentials that never got changed as you can see here in the source code.

Download a compatible version

The open source community  around Web Essentials is working on a new release that is compatible with CTP 2 and beyond. It has not yet been released. When it’s released, it will only work on Update 2 CTP 2 and later. Because of the API changes, we haven’t been able to make it backwards compatible, unfortunately.

So, if you want to give CTP 2 a spin, then please try out the new nightly builds of Web Essentials. As an added benefit, the latest build also contains Intellisense improvements to the JavaScript editor as well as support for JsDoc comments.

Download Visual Studio Update 2 CTP 2
Download Web Essentials 2013 for CTP 2

I have yet to see any issues with the latest build of Web Essentials. Actually, several existing bugs have been fixed in that build.