Автоматическая минимизация 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 Compressor к проекту добстаточно добавить в проект файл MSBuild.xml и прописать путь к нему в post-build event. Пример простейшей задачи минимизации файлов в 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 > |