HTML Minimization in Web Essentials 2013: What Has Changed Over the Year?
Almost a year has passed since the publication of the previous article and the example of minimizing the HTML fragment presented in it is no longer relevant (the Web Essentials> Minify selection command is no longer available in the context menu when editing HTML files). Serious changes in this functionality occurred back in December last year, when version 1.5 was released, but at that moment I did not have time to write an article about this. Since during this time no one described this functionality in Russian (in English there is an article by David Packet “Minifying your HTML” ), then I will try to catch up.
In version 1.5, two very useful commands were added to the context menu for HTML files:
- Minify HTML file (s)
- Create HTML bundle file
In principle, these commands are very similar to the commands of the same name for JavaScript and CSS files.
In this article, we will consider the latest stable version of Web Essentials 2013 (version 2.3), which supports WebMarkupMin 0.8.21 .
HTML file minimization
Minimizing HTML files using Web Essentials 2013 is very simple: in Solution Explorer, select one or more HTML files (with the CTRL key pressed down ), then right-click and select Web Essentials> Minify HTML file (s ) (Fig. 1). Figure 1. Minimizing the shell.html HTML file. If the minimization was successful, then in the Solution Explorer a minimized version of it will appear under the file - and the status bar of Visual Studio will display information about how much we managed to save by minimizing (Fig. 2). Fig. 2. The result of minimizing the HTML file shell.html.
shell.html
shell.min.html
If errors occur during minimization, a window with an error message will be displayed.
Unlike
.min.css
and .min.js
-files, created .min.html
-files by default will not be regenerated each time the original file is saved, but this behavior can be changed in the settings. To go to the HTML minimization settings, select the menu item Tools> Options> Web Essentials> HTML , and then go to the Minification category (Fig. 3). Fig. 3. HTML minimization settings.
We consider in detail all the properties of the Minification category :
Property | Data type | Default value | Description |
---|---|---|---|
Create gzipped files | Boolean | false | If the value of this property is equal true , then during minimization, in addition to the .min.html -file, a -file will also be created .min.html.gzip ( -file .min.html compressed with GZip). You can read about the benefits of sharing HTML minimization and GZip compression in Mads Christensen 's article , Effects of GZipping vs. minifying HTML files . " |
Minification Mode | Listing | KeepQuotes | Quotation mark removal mode in HTML attributes. It can take the following values:
|
Minify files on save | Boolean | false | If the value of this property is equal true , then created .min.html -files will be regenerated each time the original file is saved. |
Creating HTML Bundles
To create an HTML bundle, you need to select several HTML files in Solution Explorer , then right-click and select Web Essentials> Create HTML bundle file in the context menu that appears (Fig. 4). Fig. 4. Creating an HTML bundle. In the Save As dialog box that opens, you need to specify the bundle name and click the Save button (Fig. 5). Fig. 5. The Save As dialog box. As a result, 3 files will be created: (XML file with bundle settings), (result of combining the contents of the source files) and (minimized ) (Fig. 6).
content.html.bundle
content.html
content.min.html
content.html
If the settings enable the creation of GZip files, then the 4th file will be generated - content.min.html.gzip
.
Fig. 6. The result of creating an HTML bundle.
I would also like to note that the Web Essentials by combining HTML-file does not create a named type of containers:
. In our example, the file content.html
was created by simply concatenating the contents of the files change-log.html
, contact.html
and index.html
. The HTML bundle settings are in the same window as the HTML minimization settings (Fig. 7).
Fig. 7. HTML bundle settings.
We consider in detail all the properties of the Bundle category :
Property | Data type | Default value | Description |
---|---|---|---|
Custom HTML output directory | Line | Empty line | Specifies the path to the directory where the generated HTML files will be saved (the file with the bundle settings will not be moved there). It is allowed to specify both relative paths (for example, ../../Content/html-bundles ) and absolute paths (for example, C:\html-bundles ). |
Minify files on making bundle | Boolean | true | Enables / disables HTML minimization of the bundle. |
Run on build | Boolean | false | If the value of this property is equal true , then during the build of the project will be repeated generation of HTML-files. This option is useful when HTML files included in the bundle can be edited outside of Visual Studio. |
.html.bundle
): Listing 1. The bundle settings from the content.html.bundle file.
true false
elements determines the order of the files in the bundle.-->/App_Data/text-content/change-log.html /App_Data/text-content/contact.html /App_Data/text-content/index.html
From the code you can immediately see that the elements
outputDirectory
, minify
and runOnBuild
allow you to override the settings made earlier. In addition, in the element files
you can change the order of the files in the bundle, which was impossible to do through the Visual Studio interface.References
- Official Web Essentials extension
- David Packett's article “Minifying your HTML”
- Mads Christensen 's article , Effects of GZipping vs. minifying HTML files »
- WebMarkupMin Project Page on CodePlex
- My article “HTML Minimization in Web Essentials 2013”
- My article “WebMarkupMin HTML Minifier - A Modern HTML Minimizer for the .NET Platform”