HTML minimization in Web Essentials 2013

One of the most significant innovations for web developers in Visual Studio 2013 has become a new HTML editor. Unlike the old editor, which was a mixture of managed and unmanaged code (and even used some components of FrontPage), the new editor was completely rewritten in managed code (the HTML editor from WebMatrix was used as the basis).

It should be noted that for ASP.NET Web Forms (files with extensions .aspx , .ascx and .master ) the old editor is still used.

In addition to improved tools for working with HTML code, the new editor also supports the syntax of KnockoutJS , AngularJS and Handlebars views, and IntelliSense for special prefixes and META tags (Facebook, Twitter, Open Graph, Windows Phone, iOS, etc.).

Unfortunately, not every new development in the world of web development can get into Visual Studio for the following reasons:

1. Many modern web technologies and libraries are open source projects (for example, the LESS and CoffeeScript compilers, the JSHint verifier , etc.), and some of these projects have licenses that do not allow them to be included in commercial products.
2. Now web technologies are developing so fast that their support by development tools may become irrelevant within one week. Therefore, neither frequent releases of Visual Studio (now the period between releases has been reduced from two years to one year), nor periodic updates make it possible to keep Visual Studio in a completely up-to-date state.

In order to solve the above problems, Microsoft employee Mads Christensen created a VS-extension Web Essentials . The source code of Web Essentials is published on GitHub (2 versions are available: 2012 and 2013 ).

The following are additional features of the HTML editor from Visual Studio 2013 that become available after installing Web Essentials 2013:

1. Zen Coding support (for more information on using Zen Coding in Web Essentials, see John Papa ’s article “Zen Coding in Visual Studio 2012” ) and Lorem Ipsum’s “fish” text generator (for example, if you type lorem10 and press the TAB key, 10 words from Cicero's treatise “On the limits of good and evil” will be inserted into the code).
2. The Go To Definition command for the <a> , <style> and <script> .
3. HTML minimization of the selected code snippet.
4. Support for HTML regions (for example, <!--#region main--> - … <!--#endregion--> ).

Since HTML minimization in Web Essentials 2013 was implemented using the WebMarkupMin library, the author of which I am, in this article we will look at this feature in more detail.


')
Fig. 1. A list of NuGet packages that are used in Web Essentials 2013.

Minimizing a fragment of HTML code is in many ways similar to the similar functionality for JavaScript and CSS: first select the necessary code fragment (or the entire contents of the file), and then right-click and select the Web Essentials ► Minify selection command in the pop-up menu that appears (Fig. 2). ).



Figure 2. A fragment of HTML-code to minimize.

If the minimization was successful, then the minimized code will be visible in place of the selected fragment, and information about how much we were able to save by minimizing will be displayed in the status bar of Visual Studio (Fig. 3).



Fig. 3. A fragment of HTML-code after minimization.

If errors occur during the minimization, the selected code fragment will not be minimized, and an error message will be displayed in the status bar.

Now let's see what we have under the hood:

Listing 1. MenuItems/MinifyFile.cs .

 using EnvDTE; using EnvDTE80; using Microsoft.Ajax.Utilities; using Microsoft.VisualStudio.Shell; using System; using System.Collections.Generic; using System.ComponentModel.Design; using System.IO; using System.Linq; using System.Windows; using WebMarkupMin.Core; using WebMarkupMin.Core.Minifiers; using WebMarkupMin.Core.Settings; namespace MadsKristensen.EditorExtensions { internal class MinifyFileMenu { … private static List<string> _htmlExt = new List<string>() { ".html", ".htm", ".aspx", ".ascx", ".master", ".cshtml", ".vbhtml" }; … public static string MinifyString(string extension, string content) { if (extension == ".css") { … } else if (extension == ".js") { … } else if (_htmlExt.Contains(extension.ToLowerInvariant())){ var settings = new HtmlMinificationSettings { RemoveOptionalEndTags = false, AttributeQuotesRemovalMode = HtmlAttributeQuotesRemovalMode.KeepQuotes }; var minifier = new HtmlMinifier(settings); MarkupMinificationResult result = minifier.Minify(content, generateStatistics: true); if (result.Errors.Count == 0) { EditorExtensionsPackage.DTE.StatusBar.Text = "Web Essentials: HTML minified by " + result.Statistics.SavedInPercent + "%"; return result.MinifiedContent; } else { EditorExtensionsPackage.DTE.StatusBar.Text = "Web Essentials: Cannot minify the current selection"; return content; } } return null; } … } } 

From the code above, you can see that HTML minimization is performed using an instance of the HtmlMinifier class, which was created with secure settings (it is forbidden to remove quotes from attributes and delete optional end tags). Since the JS and CSS minimizers are not explicitly transmitted through the HtmlMinifier class constructor, the minimizer based on JSMin Douglas Crockford will be used to minimize the embedded JS code, and the minimizer based on Efficient stylesheet minifier Mads Christensen will be used for the embedded CSS code.

And at the end of the article I will try to clarify some non-obvious points related to HTML minimization in Web Essentials:

1. Unlike JavaScript and CSS, it is not yet possible to minimize HTML files directly from Solution Explorer (only minimization is available through an HTML editor).
2. The current version of WebMarkupMin cannot correctly handle constructions of the form {{…}} , which are commonly used in the views of Handlebars, Mustache , JsRender, and Hogan.js . Therefore, it is recommended to use HTML minimization, only for regular HTML files and KnockoutJS views.
3. When minimizing the contents of the <script> and <style> tags, you need to select not only the content, but also the tags themselves.

For more information about WebMarkupMin, you can read in my article "WebMarkupMin HTML Minifier - a modern HTML minimizer for the .NET platform . "

Links

1. The official site of the VS-extensions Web Essentials
2. Mads Christensen 's video report "Visual Studio 2013 for Web Developers: Deep Dive" from the // build / 2013 conference (held from June 26 to June 28, 2013)
3. Mads Christensen 's video report "Visual Studio 2013 Web Editor Features - HTML Editor"
4. Article Mads Christensen "My road to Visual Studio 2013"
5. Article by Mads Christensen "Open static HTML files in the Visual Studio 2013 designer"
6. Application “Add option to minify static HTML and XML files by the WebMarkupMin” on UserVoice website
7. WebMarkupMin project page on CodePlex
8. My article "WebMarkupMin HTML Minifier - modern HTML minimizer for the .NET platform"

UPD1: In the main text of the article, I did not tell about one interesting feature of the new HTML editor - de-minimization (thanks to Alexander Chernikov for his comment ). De-minimization (un-minification or beautification) is an inverse minimization operation that makes the code readable (by adding line breaks and indents). To de-optimize a selected fragment or the entire document code, select the Un-minify command in the context menu of the HTML editor (Fig. 4).



Figure 4. HTML code fragment before deminimization.



Fig. 5. A fragment of HTML-code after deminimization.

It is also worth noting that HTML de-minimization, in contrast to minimization, is an opportunity for the studio, not Web Essentials.