Автоматизированная оптимизация с помощью сборки HTML Boilerplate

24 января 2018

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


Сценарий сборки, с Полом Ирландцем


Обзор

Итак, зачем вам этот инструмент сборки? Потому что он запекается в HTML5 Boilerplate и может помочь вам автоматизировать оптимизацию производительности сети. Мы решили пойти с Apache Ant для обработки рабочей нагрузки. Как так?

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

Многие разработчики не знакомы с процессом сборки. Но не беспокойтесь; инструмент построения не является страшным монстром. Все можно настроить через относительно простой XML-файл. Эта статья поможет вам понять, как настроить инструмент сборки, настроить процесс сборки и, наконец, изменить переменные и запустить сборку.


Структура каталогов

Сценарий сборки делает некоторые предположения о том, как ваши файлы сортируются и структурируются. Вот структура папок HTML5 Boilerplate:

js libs - содержит общие библиотеки скриптов: Modernizr, jQuery и pngfix для IE6 js mylibs - содержит скрипты пользовательской библиотеки для сайта plugins.js - все плагины jQuery script.js - специфичный для сайта JavaScript


Структура структуры папок

Папка сборки содержит следующие элементы:

build.xml

Файлы сборки Apache Ant записываются в XML. Этот файл содержит наш проект (Boilerplate Build) и цели. Цели содержат элементы задач. Каждый элемент задачи из файла сборки может иметь атрибут id и позже может ссылаться на предоставленное ему значение, которое должно быть уникальным.

default.properties

default.properties содержит параметры сборки по умолчанию, структуру проекта и варианты сборки hardcore, которые мы рассмотрим в ближайшее время.

build.properties

Этот файл определяет переопределения для default.properties. Это должно быть создано пользователем, когда ему или ей необходимо переопределить определенные значения. Следовательно, он не должен находиться под контролем версий.

tools

Инструменты представляют собой набор пакетов, которые включают в себя opyipng, JPEGTran, компрессор YUI и компрессор HTML.


Настроить средство сборки

Поскольку цель инструмента сборки не зависит от платформы, мы рассмотрим необходимые шаги по ее настройке в зависимости от выбранной вами ОС.

Windows - захват и установка WinAnt. Mac OSX - используя homebrew, установите следующие пакеты: brew install libjpeg optipng. В MacPorts используйте следующую команду установки: port install jpeg optipng Ubuntu (Linux) - с помощью apt установите следующие пакеты: apt-get install libjpeg-progs optipng


Прохождение файла сборки

Инструмент построения не более чем XML-файл, основанный на Apache Ant. Ниже приведено описание заранее определенного процесса сборки. Эти элементы можно настроить, отредактировав файл build.xml.

Обобщающий JavaScript-код

<!-- Optimize javascript files -->
<target name="js.all" depends="js.remove.console, js.all.min, js.main.concat, js.libs.concat, js.concat.scripts,
js.minifyonly.min, js.delete"></target>
<!--  JS: Concat primary scripts -->
...
<!-- JS, Delete concatenated libs file (only if concat.scripts and delete.unoptimized are defined) -->
<target name="js.if.concat.scripts" if="build.delete.unoptimized, build.concat.scripts">
    <delete file="./${dir.publish}/${dir.js}/libs-${build.number}.min.js"/>
    <delete file="./${dir.publish}/${dir.js}/scripts-${build.number}.min.js"/>
</target>

Файлы js libs минимизируются, но не конкатенируются. Modernizr должен быть один в голове документа. jQuery можно извлечь из CDN, а pngfix будет включен только для IE6. js mylibs содержит ваши другие библиотеки JavaScript и плагины. Все файлы, хранящиеся здесь здесь, будут уменьшены (если они не заканчиваются на.min.js), а затем объединены вместе. plugins.js и script.js, в папке js, являются вашими. Они также будут минимизированы и объединены файлами mylibs.

Минимизирующий CSS

<target name="css" depends="copy">
    <echo message="Minifying css..."/>
    <concat destfile="./${dir.publish}/${dir.css}/style-${build.number}.css">
     <fileset file="./${dir.css}/style.css"/>
    </concat>
    ...
</target>

Все файлы CSS минитируются с использованием компрессора YUI. Вышеупомянутый скрипт Ant будет запускать style.css через компрессор YUI для минимизации.

Оптимизация изображения

<target name="imagespng" depends="copy">
    <echo message="Optimizing images"/>
    <apply executable="optipng" osfamily="unix">
     <arg value="-o7"/>
     <fileset dir="./${dir.publish}/">
       <include name="**/*.png"/>
     </fileset>
    </apply>
    ...
</target>

В HTML5 Boilerplate мы решили использовать OptiPng и jpegtran для оптимизации изображений для изображений PNG и JPG, соответственно. Тем не менее, существует множество инструментов оптимизации изображений. Если вы захотите это сделать, вы можете бесплатно заменить инструменты своими любимыми инструментами оптимизации изображений.

Например, Smush.it использует ImageMagick для определения типа изображения и преобразования файлов GIF в файлы PNG. Затем он использует gifsicle для оптимизации анимации GIF путем удаления повторяющихся пикселей в разных кадрах.

Удаление только для разработки кода

<exclude name="**/${dir.js}/profiling/**"/>
<exclude name="**/${dir.test}/**"/>
...
<target name="js.remove.console" description="Comment out console.log lines">
    <echo>Commenting out console.log lines</echo>
    <replaceregexp match="(console.log(.*))" replace="/*1*/" flags="g" >
        <fileset dir="./${dir.publish}/${dir.js}/">
            <include name="**/*.js"/>
            <exclude name="**/*.min.js"/>
        </fileset>
    </replaceregexp> 
</target>

Файлы, такие как файлы console.log, профилирования и тестирования модулей, не нужны для выпуска сайта.

Минимизация HTML

<target name="htmlbuildkit" depends="html" >
<apply executable="java" parallel="false" force="true" dest="./${dir.publish}/" >
     <fileset dir="./${dir.publish}/" includes="*.html"/>
     <arg value="-jar"/>
     <arg path="./${dir.build}/tools/htmlcompressor-0.9.3.jar"/>
</apply>
</target>

Ниже перечислены некоторые различные варианты минификсации ваших HTML-файлов:

htmlbuildkit - Сохраняет комментарии, несколько пробелов и сжимает встроенные JavaScript и CSS. htmlclean - Сохраняет несколько пробелов, удаляет ненужные кавычки и сжимает встроенные JavaScript и CSS htmlcompress - Удаляет ненужные кавычки и сжимает встроенные JavaScript и CSS.

Автоматическая базирующаяся кэш-память нумерации

HTML5 Boilerplate использует строку запроса для управления версиями JavaScript CSS и кэширования.

HTML5 Boilerplate по умолчанию использует строку запроса для управления версиями JavaScript CSS и перебора кеша. Недостатком такого подхода является то, что некоторые промежуточные прокси - и потенциально другие клиенты - не могут кэшировать активы, содержащие строки запроса. Это связано с базовыми эвристиками, которые определяют такие запросы, как динамические данные.

Инструмент построения сначала удалит проверку версий строки запроса и использует автоматическую нумерацию базовой линии для управления выпуском и перебора кеша.

Конфигурирование исключений

<exclude name=".gitignore"/>
<exclude name=".project"/>
<exclude name=".settings"/>
<exclude name="README.markdown"/>
<exclude name="**/.git/**"/>
<exclude name="**/.svn/**"/>
<exclude name=".gitignore"/>
<exclude name="*.conf*"/>
<exclude name="mime.types"/>
<exclude name="**/${dir.build}/**"/>
<exclude name="**/${dir.test}/**"/>
<exclude name="**/${dir.demo}/**"/>
<exclude name="**/${dir.js}/profiling/**"/>

Не все файлы должны быть опубликованы. Прекрасным примером этого могут быть файлы, созданные системой управления версиями, такой как subversion и git.

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


Прохождение default.properties

Переменные внутри файла сборки определены в default.properties и build.properties.

Параметры сборки

build.concat.scripts = true - если установлено, несколько файлов сценариев будут сжиматься вместе в один сплоченный файл. build.delete.unoptimized = true - если установлено, будут удалены неоптимизированные файлы. file.exclude = nonexistentfile - исключает фильтр для публикации (не может быть пустым).

Структура проекта

dir.publish = publish
dir.build   = build
dir.tools   = ${dir.build}/tools
dir.test    = test
dir.demo    = demo
dir.js      = js
...

Структура проекта содержит имена каталогов, такие как показанные выше, а также основную папку JS, библиотеки утилиты JS и папки, которые следует только минимизировать, но не конкатенировать.

Другие параметры сборки

build.info = buildinfo.properties - построено управление версиями tool.yuicompressor = yuicompressor-2.4.2.jar - Компрессор YUI определяется с помощью yuicompressor-2.4.2.jar


Хорошо - но Как это использовать?

Наконец, мы узнаем, как вы можете использовать инструмент построения в своих проектах! Для запуска инструмента построения см. Следующие шаги.

Откройте интерфейс командной строки и перейдите в папку проекта. Перейдите в папку сборки: cd build Существует четыре разных способа создания вашего сайта: по умолчанию используется путь: ant build Когда скрипт сборки изменяет ваш HTML для ссылки на новый миниатюрный скрипт (обычно называемый как скрипты-002.min.js), он ищет некоторые комментарии HTML, которые относятся к началу и концу блока сценария. В настоящее время он ищет.

Параметры сборки

Вот список различных вариантов сборки, которые вы можете выбрать в соответствии с вашими потребностями:

ant build - незначительные оптимизации html (удалены дополнительные кавычки). встроенный скриптовый стиль minified (по умолчанию) ant buildkit - все пробелы html сохраняются. встроенный скриптовый стиль minified ant minify - выше оптимизаций плюс полный html minification ant text - то же, что и build, но без изображения (png jpg) оптимизация


Заключение

Оптимизация производительности не должна быть дорогостоящей или трудоемкой. С некоторыми правилами многократного использования можно медленно настроить процесс сборки для автоматизации повторяющихся аспектов работы по оптимизации. Apache Ant обеспечивает мощную, но простую в использовании структуру, в то время как HTML5 Boilerplate использует это, чтобы сделать веб-оптимизацию максимально простой для веб-разработчиков. Большое вам спасибо за чтение!