10.02.2016

Сжатие JS и CSS с помощью Maven

Чем меньше размер загружаемых скриптов и css файлов - тем лучше. Для того чтобы сжать файлы, можно пользоваться разными утилитами и плагинами, в зависимости от используемой технологии/среды разработки. Я хочу привести пример того, как можно использовать Maven для сжатия CSS/JS файлов. Я предполагаю ситуацию, в которой у вас есть веб-приложение, которое выкладывается на сервер в виде WAR архива. Понятно, что для ведения разработки сжатые файлы не подходят, но сжимать отдельно каждый файл до сборки продакшн версии проекта - решение не особо удобное. Поэтому хотелось бы сделать так, чтобы при сборке приложения CSS/JS файлы автоматически сжимались. Здесь отлично подойдет Maven с его профилями и плагинами!

На всякий случай отмечу, что я использовал Maven 3.0.4, со сборкой проекта в Eclipse Mars. Для решения задачи я использую два плагина: minify-maven-plugin и maven-war-plugin. Первый сжимает указанные в pom файлы, а второй перезаписывает их в WAR архиве. Таким образом получается, что больше не нужно держать две версии всех скриптов - аля file.js и file.min.js, аналогично и с CSS. Это избавляет от головной боли! Просто при разработке используются несжатые версии файлов, а при сборке продакшн версии проекта файлы сжимаются и перезаписываются в WAR архиве.

Добавьте в pom.xml (непосредственно в секцию project, если у вас еще нет профилей):

<profiles>
	<profile>
		<id>PROD</id>
		<build>
			<plugins>
				<plugin>
					<groupId>com.samaxes.maven</groupId>
					<artifactId>minify-maven-plugin</artifactId>
					<version>1.7.4</version>
					<executions>
						<execution>
							<id>default-minify</id>
							<phase>prepare-package</phase>
							<configuration>
								<charset>UTF-8</charset>
								<skipMerge>true</skipMerge>
								<nosuffix>true</nosuffix>
								<webappTargetDir>${project.build.directory}/minify</webappTargetDir>

								<cssSourceDir>resources/css</cssSourceDir>
								<cssSourceIncludes>
									<cssSourceInclude>*.css</cssSourceInclude>
								</cssSourceIncludes>

								<jsSourceDir>resources/js</jsSourceDir>
								<jsSourceIncludes>
									<jsSourceInclude>*.js</jsSourceInclude>
								</jsSourceIncludes>

								<jsEngine>YUI</jsEngine>

							</configuration>
							<goals>
								<goal>minify</goal>
							</goals>
						</execution>
					</executions>
				</plugin>

				<plugin>
					<groupId>org.apache.maven.plugins</groupId>
					<artifactId>maven-war-plugin</artifactId>
					<version>2.4</version>
					<configuration>

						<webResources>
							<resource>
								<directory>${project.build.directory}/minify</directory>
							</resource>
						</webResources>
						<warSourceDirectory>src/main/webapp</warSourceDirectory>

					</configuration>
				</plugin>
			</plugins>
		</build>
	</profile>

</profiles>

Поскольку плагины добавлены в profile, то они будут активированы только при сборке с указанным профилем. В данном случае - PROD. При сборке без указания профиля файлы сжиматься не будут, это удобно. minify-maven-plugin выполняет сжатие всех JS/CSS файлов из папок resources/js и resources/css соответственно (папки resources/js и resources/css должны быть расположены в webapp). После этого сжатые файлы копируются в папку minify в директории, где собирается проект. Параметр skipMerge = true, поэтому плагин не будет объединять все файлы в один. И наконец, параметр nosuffix = true, для того чтобы файлы записывались во временную директорию с исходными именами, без добавления *.min.*. После этого maven-war-plugin перезаписывает файлы в WAR архиве сжатыми файлами из папки minify.
Теперь осталось только запустить сборку проекта с профилем PROD:

После этого, можно открыть WAR архив и убедиться, что там лежат сжатые файлы. А если не лежат - проверьте пути указанные для плагинов в вышеуказанном примере, возможно вам нужно их поменять =).



Теги: javascript web javaEE

comments powered by Disqus