Автоматическая минимизация CSS и JavaScript файлов в Visual Studio

Источник: generaltea

Одним из способов уменьшения времени загрузки страниц веб-сайтов является уменьшение CSS и JavaScript файлов.

Каким способом это можно сделать?

Для этого из файлов необходимо удалить все пустые строки, пробелы, переводы строк и комментарии. То есть все те символы, которые не несут информативной нагрузки, а лишь способствуют улучшению читабельности файлов, и без которых браузер может обойтись при рендеринге страниц.

Для минимизации CSS и JavaScript файлов существует огромное множество инструментов. Но одним из наилучших на мой взгляд, является YUI Compressor от компании Yahoo.

YUI Compressor позволяет сократить размер CSS и JavaScript файлов на 40-60%. YUI Compressor написан на языке Java и для своего запуска требует виртуальную машину Java (версии >= 1.4).

При работе с Visual Studio будет немного неудобно использование данного инструмента, поэтому был создан порт данного минимайзера для платформы .NET - YUI Compressor for .NET.

Основные возможности YUI Compressor for .NET:

  • YUI Css сжатие.
  • YUI JavaScript сжатие.
  • Интеграция с Visual Studio post-build событиями. По этому адресу (http://yuicompressor.codeplex.com/wikipage?title=Visual%20Studio%20Post-build%20Event%20example&ProjectName=yuicompressor) можно найти более подробную инструкцию.
  • MSBuild таски, могут быть использованы в решении Web Deployment Project.
  • MSBuild таски, также могут собирать все сжатые файлы в один (aka. файла объединения).
  • Возможность обработки, различных типов кодировки (например Unicode) и ThreadCulture.
  • Может обрабатывать групповые задачи (например *. JS).

Для быстрого подключения YUI Compressor к проекту добстаточно добавить в проект файл MSBuild.xml и прописать путь к нему в post-build event.

yiu_compress_post_build 

Пример простейшей задачи минимизации файлов в MSBuild файле:

01.<?xml version="1.0" encoding="utf-8"?>
02.<Project xmlns=http://schemas.microsoft.com/developer/MsBuild/2003>
03.    <UsingTask
04.        TaskName="CompressorTask"
05.        AssemblyFile="..\..\Projects\Yahoo.Yui.Compressor\Model\bin\Debug\Yahoo.Yui.Compressor.dll" />
06.    <!-- The .NET 2.0 version of the task .. and yes .. that's Model.Net20 folder listed twice .. i know i know...
07.    <UsingTask
08.        TaskName="CompressorTask"
09.        AssemblyFile="..\..\Projects\Yahoo.Yui.Compressor\Model.Net20\Model.Net20\bin\Debug\Yahoo.Yui.Compressor.NET20.dll" />
10.    -->
11. 
12.    <!-- Define the output locations. These can be set via the msbuild command line using
13.         /p:CssOutputFile=$(TargetDir)../whatever...
14.         /p:JavaScriptOutputFile=$(TargetDir)../whatever...
15. 
16.         If they are not supplied or are empty, then we the value whatever is supplied, below.
17.    -->
18.    <PropertyGroup>
19.        <CssOutputFile Condition=" '$(CssOutputFile)'=='' ">SylesSheetFinal.css</CssOutputFile>
20.        <JavaScriptOutputFile Condition=" '$(JavaScriptOutputFile)'=='' ">JavaScriptFinal.css</JavaScriptOutputFile>
21.    </PropertyGroup>
22. 
23.    <Target Name="MyTaskTarget">
24.        <!--
25.            ItemGroup\CssFiles or ItemGroup\JavaScriptFiles: add zero to many files you wish to include in this compression task.
26.            Don't forget, you can use the wildcard (eg. *.css, *.js) if you feel up to it.
27.            Finally, at least one item is required - either a css file or a js file.
28. 
29.            CssFiles/JavaScriptFiles data format: Please do not touch this.
30.            DeleteCssFiles: [Optional] True / Yes / Yeah / Yep / True / FoSho / Fo Sho. Default is False. Anything else is False. (eg. blah = false, xxxx111 = false, etc)
31.            CssCompressionType: YuiStockCompression / MichaelAshsRegexEnhancements / HaveMyCakeAndEatIt or BestOfBothWorlds or Hybrid; Default is YuiStockCompression.
32.            ObfuscateJavaScript: [Optional] refer to DeleteCssFiles, above.
33.            PreserveAllSemicolons: [Optional] refer to DeleteCssFiles, above.
34.            DisableOptimizations: [Optional] refer to DeleteCssFiles, above.
35.            EncodingType: [Optional] ASCII, BigEndianUnicode, Unicode, UTF32, UTF7, UTF8, Default. Default is 'Default'.
36.            DeleteJavaScriptFiles: [Optional] refer to DeleteCssFiles, above.
37.            LineBreakPosition: [Optional] the position where a line feed is appened when the next semicolon is reached. Default is -1 (never add a line break).
38.            0 (zero) means add a line break after every semicolon. (This might help with debugging troublesome files).
39.            LoggingType: None / ALittleBit / HardcoreBringItOn;  Hardcore also lists javascript verbose warnings, if there are any (and there usually is :P ).
40.            ThreadCulture: [Optional] the culture you want the thread to run under. Default is 'en-gb'.
41.            IsEvalIgnored: [Optional] compress any functions that contain 'eval'. Default is False, which means a function that contains 'eval' will NOT be compressed. It's deemed risky to compress a function containing 'eval'. That said, if the usages are deemed safe this check can be disabled by setting this value to True.
42.        -->
43.        <ItemGroup>
44.            <!-- Single files, listed in order of dependency -->
45.            <CssFiles Include="StylesheetSample1.css"/>
46.            <CssFiles Include="StylesheetSample2.css"/>
47.            <CssFiles Include="StylesheetSample3.css"/>
48.            <CssFiles Include="StylesheetSample4.css"/>
49. 
50.            <JavaScriptFiles Include="jquery-1.3.2.js"/>
51. 
52.            <!-- All the files. They will be handled (I assume) in alphabetically. -->
53.            <!-- <CssFiles Include="*.css" />
54.            <JavaScriptFiles Include="*.js" />
55.            -->
56.        </ItemGroup>
57.        <CompressorTask
58.            CssFiles="@(CssFiles)"
59.            DeleteCssFiles="false"
60.            CssOutputFile="$(CssOutputFile)"
61.            CssCompressionType="YuiStockCompression"
62.            JavaScriptFiles="@(JavaScriptFiles)"
63.            ObfuscateJavaScript="True"
64.            PreserveAllSemicolons="False"
65.            DisableOptimizations="Nope"
66.            EncodingType="Default"
67.            DeleteJavaScriptFiles="false"
68.            LineBreakPosition="-1"
69.            JavaScriptOutputFile="$(JavaScriptOutputFile)"
70.            LoggingType="ALittleBit"
71.            ThreadCulture="en-au"
72.            IsEvalIgnored="false"
73.            />
74.    </Target>
75.</Project>

Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=23482