HTML Minimization in Web Essentials 2013: What Has Changed Over the Year?

    Web Essentials and WebMarkupMin Logos
    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:
    1. Minify HTML file (s)
    2. 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.htmlshell.min.html




    If errors occur during minimization, a window with an error message will be displayed.

    Unlike .min.cssand .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 :
    PropertyData typeDefault valueDescription
    Create gzipped filesBooleanfalseIf 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.htmlcompressed 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 ModeListingKeepQuotesQuotation mark removal mode in HTML attributes. It can take the following values:
    • KeepQuotes Save quotes;
    • Html4. Deletes quotes in accordance with the HTML 4.X standard;
    • Html5. Deletes quotes in accordance with the HTML5 standard.
    Minify files on saveBooleanfalseIf the value of this property is equal true, then created .min.html-files will be regenerated each time the original file is saved.
    All of the above settings also apply to HTML bundles.

    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.bundlecontent.htmlcontent.min.htmlcontent.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.htmlwas created by simply concatenating the contents of the files change-log.html, contact.htmland 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 :
    PropertyData typeDefault valueDescription
    Custom HTML output directoryLineEmpty lineSpecifies 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 bundleBooleantrueEnables / disables HTML minimization of the bundle.
    Run on buildBooleanfalseIf 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.
    The settings listed above apply only when creating HTML bundles. To change the settings in already existing HTML bundles, you need to edit the file with the bundle settings (file with the extension .html.bundle):

    Listing 1. The bundle settings from the content.html.bundle file.

    truefalse
       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, minifyand runOnBuildallow you to override the settings made earlier. In addition, in the element filesyou can change the order of the files in the bundle, which was impossible to do through the Visual Studio interface.

    References


    1. Official Web Essentials extension
    2. David Packett's article “Minifying your HTML”
    3. Mads Christensen 's article , Effects of GZipping vs. minifying HTML files »
    4. WebMarkupMin Project Page on CodePlex
    5. My article “HTML Minimization in Web Essentials 2013”
    6. My article “WebMarkupMin HTML Minifier - A Modern HTML Minimizer for the .NET Platform”


    Also popular now: