Автоматизация уменьшения файлов JavaScript и CSS в приложениях SharePoint

Если вы предпочитаете пакеты NuGet в своей среде развертывания, можете найти копию сборки (DLL) на веб-сайте NuGet. Помните, что пакет NuGet не включает версию инструмента для командной строки. Загрузив Microsoft Ajax Minifier и установив файл MSI, скопируйте файл AjaxMinifier.exe и добавьте его к новой папке, названной Minify, в хостируемом SharePoint проекте VS приложения (см. экран 1). Затем переименуйте файлы JavaScript и CSS, которые идут с шаблоном проекта приложения на SharePoint, чей размер вы хотите уменьшить.

В моем примере я уменьшу в размере файлы app.cssHapp.js, для чего переименую их в app.debug.cssnapp. debug.js. Эти переименованные файлы представляют неуменьшенные версии файлов, которые я буду разворачивать.

После переименования файлов создайте файлы JavaScript и CSS, в которые Ajax Minifier будет загружать уменьшенные версии арр. debug. cssHapp. debug.js. Поместите эти файлы в те же самые папки, где располагаются файлы .debug.

Эти файлы имеют те же файловые имена, что и файлы, которые вы только что переименовали. Не нужно помещать в них какой-либо контент: AjaxMinifier.exe сам наполнит эти файлы.

Затем создайте два XML-файла и добавьте их в папку Minify. В моем примере эти файлы названы cssFiles. xml и jsFiles.xml. Эти файлы содержат данные, которые указывают утилите командной строки AjaxMinifier.exe, какие файлы необходимо уменьшить в размере, и имена уменьшенных файлов, которые следует сгенерировать.

Потом можно немного передохнуть и сходить в торговый центр неподалеку.

На экране 2 показано, как в Visual Studio выглядит приложение SharePoint, после того как выполнены все задачи. Приложение использует цветовое выделение, чтобы было понятно, какие файлы JavaScript и CSS были сопоставлены.

Вот так выглядит код в файле cssFiles. xml. Элемент <output> определяет уменьшенный файл CSS, который нужно создать, <input> определяет файл-источник, который необходимо уменьшить.

> path=». AContentNapp.css»> path=”..\Content\app.debug.css7>

Файл jsFiles.xmlfile использует ту же самую структуру. Вот как это выглядит:

> path=»..\scripts\app.js»> path=»..\scripts\app.debug.js7>

Вы можете включить множественные элементы <input> внутрь элемента <output>, если хотите сложить несколько файлов в один уменьшенный файл. Использование этого подхода в дальнейшем оптимизирует ваше приложение так, что будет требоваться только один запрос, чтобы загрузить все файлы JavaScript, которые ассоциируются с вашим приложением.

Кроме того, вы можете включить несколько элементов <output>, если хотите уменьшить размер нескольких файлов.

Затем обновите файлы elements.xml, которые ассоциируются с модулями, разворачивающими файлы JavaScript и CSS. Удалите элементы, которые соответствуют версиям .debug файлов JavaScript и CSS так, чтобы они не были включены в пакеты приложения и развертывания.

Visual Studio автоматически добавил элементы <File>, когда вы переименовали файлы. Вот файл elements, xml, который разворачивает файл app.css: version=»1.0″ encoding=,,utf-8″?> xmlns=»http://schemas.microsoft.com/ sharepointT>

Name=»Content»>

Path=»Content\app.css» Url= «Content/app.css» />

А это файл elements.xml, который разворачивает файл app.js: version=»1.0″ encoding=,,utf-8″?> xmlns=»http://schemas.microsoft.com/ sharepoint/“>

Name=’Scriptse>

Path=»Scripts\jquery-1.7.1 .min.js» Url=nScripts/jquery-1.7.1 .min.js» /> Path=»Scripts\jquery-1.7.1 .js» Url=»Scripts/jquery-1.7.1 .js» /> Path=»Scripts\jquery-1.7.1 .intellisense.js» Url=,,Scripts/jquery-1 7.1 .intellisense. is» />

Path=»Scripts\app.js»

UiVScripts/app.js» />

Щелкните правой кнопкой мыши по проекту, расположенному на SharePoint, в Solution Explorer, выберите Properties и вкладку Build Events. Добавьте показанный ниже код в поле Pre-buildeventcommandline: M$(ProjectDir)Minify\AjaxMinifier.exe»

-CSS -CLOBBER -xml$(ProjectDir) Minify\cssFiles.xmr n$(ProjectDir)MinifyNAjaxMinifier.exe»

-JS -CLOBBER -xml $(ProjectDir)Minify\ jsFiles.xml»

Этот код вызывает утилиту командной строки AjaxMinifier.exe, уменьшающую размер файлов JavaScript и CSS, перечисленных в xml-файл ах, которые вы создали. Чтобы получить больше информации о различных аргументах, которые вы можете использовать с утилитой AjaxMinifier. ехе, обратитесь к документации по сайту Microsoft Ajax Minifier CodePlex.

Итак, попробуем. Щелкните правой кнопкой мыши по проекту, хостируемому SharePoint, в Solution Explorer и выберите Rebuild.

Внутри Visual Studio в окне Output Window убедитесь, что AjaxMinifier. ехе выводит отчет о статусе процесса уменьшения размера. Вот как это выглядит:

— Rebuild All started: Project: AutoMinifySPApp, Configuration:

Debug Any CPU —

Microsoft Ajax Minifier (version 5.2.5021.16390)

Original Size: 975 bytes; reduced size:

428 bytes (56.1% minification)

Gzip of source input approx. 474 bytes (51.4% compression)

Gzip of minified output approx. 256 bytes (73.7% compression)

===== Rebuild All: 1 succeeded,

0 failed, 0 skipped =====

Вы увидите, что CSS-файл арр. debug.css не был уменьшен. Это произошло потому, что в Visual Studio не указан CSS в файле арр. debug, css стандартного шаблона приложения, хостируемого SharePoint. Однако вы заметите, что Java Script-файл арр.debug.js был уменьшен до 428 байт.

В данном примере количество байтов, которые вы сохраняете, минимально, но, когда вы создаете приложение, хостируемое SharePoint, ваши файлы арр. debug.cssnapp.debug.js будут включать гораздо больше кода CSS nJavaScript, чем первоначальные стандартные файлы. Преимущества уменьшения размера файлов будут очевидны.

Если вы откроете файл арр.debug.js, то увидите, что его содержимое остается прежним и вы можете начинать работать с ним (см. экран 3). Открыв файл app.js, вы увидите уменьшенную версию файла (см. экран 4). Обратите внимание, что весь код располагается в одной строке, а комментарии и пробелы были удалены.

macopro 26.12.2013. Categories: Новости.

Автоматизация уменьшения файлов JavaScript и CSS в приложениях SharePoint

Sidebar