Сжатие 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