Статьи

Расширьте возможности вашего CSS в вашей сборке Maven

Октябрь 18, 2018

Люди, которые знают меня, также знают, что я интересуюсь
GUI : это означает, что я иногда пачкаю руки и копаюсь в таблицах стилей (хотя у меня вообще нет графических навыков). Когда это происходит, у меня всегда возникают вопросы относительно того, как лучше всего разложить стили. В связи с этим отсутствуют различные
версии CSS , поскольку они не предназначены для управления инженерами. Недавняя тенденция — генерировать CSS из источника, который приносит некоторые интересные свойства, такие как вложенность, переменные, миксины, наследование и другие. Два примера этой тенденции —
МЕНЬШЕ и
SASS . Не очень быстрый пример можно найти чуть
ниже, Учитывая, что я инженер, единственное требование, которое я предъявляю к этим технологиям, — это то, что я могу генерировать окончательный CSS во время моей сборки автоматизированным и воспроизводимым способом. После быстрого поиска я убедился использовать
wro4j . Вот причины, почему в простом сценарии использования.

Плагин Maven

Wro4j включает в себя
плагин Maven . Чтобы вызвать его в сборке, просто добавьте его в свой POM:

<plugin>
	<groupId>ro.isdc.wro4j</groupId>
	<artifactId>wro4j-maven-plugin</artifactId>
	<version>1.4.6</version>
	<executions>
		<execution>
			<goals>
				<goal>run</goal>
			</goals>
			<phase>generate-resources</phase>
		</execution>
	</executions>
</plugin>

  У тебя аллергия на мавена? Нет проблем, инструмент
командной строки также предоставляется бесплатно.

Генерация времени сборки

По очевидным причинам производительности я предпочитаю генерацию времени сборки вместо времени выполнения. Но если вы предпочитаете последнее, для этого есть
готовый фильтр JavaEE .

Конфигурируемость

Поскольку оригинальной стратегией wro4j является генерация во время выполнения, файлы конфигурации по умолчанию должны находиться внутри архива. Однако это можно легко настроить, установив некоторые теги в POM:

<configuration>
	<wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
	<wroFile>${basedir}/src/main/config/wro.xml</wroFile>
	<extraConfigFile>${basedir}/src/main/config/wro.properties</extraConfigFile>
</configuration>

Последний удар

Настоящая причина похвалить wro4j в том, что LESS поколение — это лишь малая часть его возможностей: для wro4j это всего лишь
процессор среди других. Вам нужно только взглянуть на
длинный список доступных процессоров (до и после), чтобы использовать их как можно скорее. Например, wro4j также
упаковывает процессор JAWR (пакетный и минимизируемый продукт, о котором
я писал в блоге некоторое время назад). Однако, как только вы попадете туда, перед вами откроется целая новая вселенная, поскольку вы получаете процессоры для:

  • Уменьшение размера файлов JavaScript путем минимизации их с помощью Google, YUI, JAWR и т. Д.
  • Уменьшение размера CSS-файлов путем их минимизации
  • Минимизация количества запросов путем объединения ваших файлов JavaSscript в один файл
  • Минимизация количества запросов путем объединения ваших CSS-файлов в один файл.
  • Обработка LESS CSS
  • Обработка SASS CSS
  • Анализ вашего JavaScript с помощью LINT

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

Быстрые инструкции

Чтобы быстро настроить wro4j, вот несколько готовых фрагментов:

  • Maven POM, как видно выше 
    <plugin>
	<groupId>ro.isdc.wro4j</groupId>
	<artifactId>wro4j-maven-plugin</artifactId>
	<version>1.4.6</version>
	<configuration>
		<wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
		<wroFile>${basedir}/src/main/config/wro.xml</wroFile>
		<extraConfigFile>${basedir}/src/main/config/wro.properties</extraConfigFile>
		<targetGroups>all</targetGroups>
		<cssDestinationFolder>${project.build.directory}/${project.build.finalName}/style/</cssDestinationFolder>
		<jsDestinationFolder>${project.build.directory}/${project.build.finalName}/script/</jsDestinationFolder>
		<contextFolder>${basedir}/src/main/webapp/</contextFolder>
		<ignoreMissingResources>false</ignoreMissingResources>
	</configuration>
	<executions>
		<execution>
			<goals>
				<goal>run</goal>
			</goals>
			<phase>generate-resources</phase>
		</execution>
	</executions>
</plugin>

    Обратите внимание на использование ConfigurableWroManagerFactory. Это позволяет легко добавлять и удалять процессоры, обновляя следующий файл.

  • Файл процессоров wro.properties, содержащий список обработок, которые должны быть выполнены для исходных файлов. Здесь мы генерируем CSS из LESS, разрешаем импорт в единый файл и минимизируем как CSS (с JAWR), так и JavaScript: 
    preProcessors=lessCss,cssImport
postProcessors=cssMinJawr,jsMin
  • Файл конфигурации wro.xml, чтобы сказать wro4j, как объединять файлы CSS и JS. В нашем случае styles.css будет объединен в all.css и global.js в all.js. 
    <?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/style/styles.css</css>
    <js>/script/global.js</js>
  </group>
</groups>
  • Наконец, МЕНЬШИЙ пример можно найти чуть ниже .

Вывод

Есть несколько путей оптимизации для легко доступных веб-приложений. Некоторые предоставляют альтернативные способы определения вашего CSS, некоторые минимизируют ваш CSS, некоторые JS, другие объединяют эти файлы и т. Д. Было бы стыдно игнорировать их, потому что они могут быть реальным преимуществом в сценариях с большой нагрузкой. wro4j предоставляет простой способ обернуть все эти операции в воспроизводимую сборку.

От http://blog.frankel.ch/empower-your-css-in-your-maven-build

МЕНЬШЕ 
@default-font-family: Helvetica, Arial, sans-serif;

@default-radius: 8px;

@default-color: #5B83AD;
@dark-color: @default-color - #222;
@light-color: @default-color + #222;

.bottom-left-rounded-corners (@radius: @default-radius) {
	.rounded-corners(0, 0, @radius, 0)
}

.bottom-right-rounded-corners (@radius: @default-radius) {
	.rounded-corners(0, 0, 0, @radius)
}

.bottom-rounded-corners (@radius: @default-radius) {
	.rounded-corners(0, 0, @radius, @radius)
}

.top-left-rounded-corners (@radius: @default-radius) {
	.rounded-corners(@radius, 0, 0, 0)
}

.top-right-rounded-corners (@radius: @default-radius) {
	.rounded-corners(0, @radius, 0, 0)
}

.top-rounded-corners (@radius: @default-radius) {
	.rounded-corners(@radius, @radius, 0, 0)
}

.rounded-corners(@top-left: @default-radius, @top-right: @default-radius, @bottom-left: @default-radius, @bottom-right: @default-radius) {
	-moz-border-radius: @top-left @top-right @bottom-right @bottom-left;
	-webkit-border-radius: @top-left @top-right @bottom-right @bottom-left;
	border-radius: @top-left @top-right @bottom-right @bottom-left;
}

.default-border {
	border: 1px solid @dark-color;
}

.no-bottom-border {
	border-bottom: 0;
}

.no-left-border {
	border-left: 0;
}

.no-right-border {
	border-right: 0;
}

body {
	font-family: @default-font-family;
	color: @default-color;
}

h1 {
	color: @dark-color;
}

a {
	color: @dark-color;
	text-decoration: none;
	font-weight: bold;

	&:hover {
		color: black;
	}
}

th {
	color: white;
	background-color: @light-color;
}

td, th {
	.default-border;
	.no-left-border;
	.no-bottom-border;
	padding: 5px;

	&:last-child {
		.no-right-border;
	}
}

tr:first-child {

	th:first-child {
		.top-left-rounded-corners;
	}

	th:last-child {
		.top-right-rounded-corners;
	}

	th:only-child {
		.top-rounded-corners;
	}
}

tr:last-child {

	td:first-child {
		.bottom-left-rounded-corners;
	}

	td:last-child {
		.bottom-right-rounded-corners;
	}

	td:only-child {
		.bottom-rounded-corners;
	}
}

thead tr:first-child th, thead tr:first-child th {
	border-top: 0;
}

table {
	.rounded-corners;
	.default-border;
	border-spacing: 0;
	margin: 5px;
}
Сгенерированный CSS 
.default-border {
	border: 1px solid #39618b;
}

.no-bottom-border {
	border-bottom: 0;
}

.no-left-border {
	border-left: 0;
}

.no-right-border {
	border-right: 0;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	color: #5b83ad;
}

h1 {
	color: #39618b;
}

a {
	color: #39618b;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: black;
}

th {
	color: white;
	background-color: #7da5cf;
}

td,th {
	border: 1px solid #39618b;
	border-left: 0;
	border-bottom: 0;
	padding: 5px;
}

td:last-child,th:last-child {
	border-right: 0;
}

tr:first-child th:first-child {
	-moz-border-radius: 8px 0 0 0;
	-webkit-border-radius: 8px 0 0 0;
	border-radius: 8px 0 0 0;
}

tr:first-child th:last-child {
	-moz-border-radius: 0 8px 0 0;
	-webkit-border-radius: 0 8px 0 0;
	border-radius: 0 8px 0 0;
}

tr:first-child th:only-child {
	-moz-border-radius: 8px 8px 0 0;
	-webkit-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
}

tr:last-child td:first-child {
	-moz-border-radius: 0 0 0 8px;
	-webkit-border-radius: 0 0 0 8px;
	border-radius: 0 0 0 8px;
}

tr:last-child td:last-child {
	-moz-border-radius: 0 0 8px 0;
	-webkit-border-radius: 0 0 8px 0;
	border-radius: 0 0 8px 0;
}

tr:last-child td:only-child {
	-moz-border-radius: 0 0 8px 8px;
	-webkit-border-radius: 0 0 8px 8px;
	border-radius: 0 0 8px 8px;
}

thead tr:first-child th,thead tr:first-child th {
	border-top: 0;
}

table {
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
	border: 1px solid #39618b;
	border-spacing: 0;
	margin: 5px;
}

48
Share: