Как вы автоматизируете миниатюра Javascript для своих веб-приложений Java?

Мне интересно узнать, как вы предпочитаете автоматизировать миниатюра Javascript для своих веб-приложений Java. Вот несколько аспектов, которые меня особенно интересуют:

  • Как он интегрируется? Является ли он частью вашего инструмента сборки, фильтра сервлета, автономной программы после обработки файла WAR или чего-то еще?
  • Можно ли легко включать и отключать? Очень неудобно пытаться отлаживать миниатюрный script, но также полезно, чтобы разработчик смог проверить, что мини-код ничего не сломает.
  • Работает ли он прозрачно или имеет какие-либо побочные эффекты (помимо тех, которые присущи минимализации), которые я должен учитывать в своей повседневной работе?
  • Какой minifier он использует?
  • Имеет ли отсутствие каких-либо функций, о которых вы можете думать?
  • Что вам нравится?
  • Что вам не нравится?

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

(Обратите внимание, что это не вопрос о том, какой minifier лучший. У нас уже много таких.)

ОТВЕТЫ

Ответ 1

Закрытое сообщение

Если вы публикуете что-то новое в этом потоке, отредактируйте это сообщение, чтобы связаться с вашим.

Ответ 2

Мы используем задачу Ant, чтобы минимизировать js файлы с YUICompressor во время сборки сборки и поместить результат в разделенную папку. Затем мы загружаем эти файлы на веб-сервер. Вы можете найти несколько хороших примеров интеграции YUI + Ant в этом блоге.

Вот пример:

<target name="js.minify" depends="js.preprocess">
    <apply executable="java" parallel="false">
        <fileset dir="." includes="foo.js, bar.js"/>
        <arg line="-jar"/>
        <arg path="yuicompressor.jar"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="glob" from="*.js" to="*-min.js"/>
        <targetfile/>
    </apply>
</target>

Ответ 3

Я считаю, что одним из лучших и правильных инструментов для работы является wro4j Отъезд https://github.com/wro4j/wro4j p >

Он делает все, что вам нужно:

  • Хорошо организованные веб-ресурсы проекта (js и css)
  • Объединить и минимизировать их во время выполнения (используя простой фильтр) или время сборки (используя плагин maven)
  • Бесплатный и открытый исходный код: выпущен под лицензией Apache 2.0
  • несколько инструментов минимизации, поддерживаемых wro4j: JsMin, компрессор Google Closure, YUI и т.д.
  • Очень проста в использовании. Поддерживает сервлет-фильтр, обычную Java или Spring Конфигурация
  • Поддержка метаданных Javascript и CSS: CoffeeScript, Less, Sass и т.д.
  • Проверка: JSLint, CSSLint и т.д.

Может работать как в режиме отладки, так и в режиме производства. Просто укажите все файлы, которые он должен обрабатывать/предварительно обрабатывать, и все остальное.

Вы можете просто включить объединенный, сокращенный и сжатый ресурс, например:

<script type="text/javascript" src="wro/all.js"></script>

Ответ 4

Я написал макросы ant для компилятора Google Closure и Yahoo-компрессора и включил этот файл в различные веб-проекты.

<?xml version="1.0" encoding="UTF-8"?>
<!-- CSS and JS minifier. -->
<!DOCTYPE project>
<project name="minifier" basedir=".">

  <property name="gc" value="compiler-r1592.jar" />
  <property name="yc" value="yuicompressor-2.4.6.jar" />

  <!-- Compress single js with Google Closure compiler -->
  <macrodef name="gc-js">
    <attribute name="dir" />
    <attribute name="src" />
    <sequential>
      <java jar="${gc}" fork="true">
        <!--
        - - compilation_level WHITESPACE_ONLY | SIMPLE_OPTIMIZATIONS | ADVANCED_OPTIMIZATIONS
        Specifies the compilation level to use. Default: SIMPLE_OPTIMIZATIONS
        - - warning_level QUIET | DEFAULT | VERBOSE
        Specifies the warning level to use.
        -->
        <arg line="[email protected]{dir}/@{src}.js" />
        <arg line="[email protected]{dir}/@{src}-min-gc.js" />
      </java>
    </sequential>
  </macrodef>

  <!-- Compress single js with Yahoo compressor -->
  <macrodef name="yc-js">
    <attribute name="dir" />
    <attribute name="src" />
    <sequential>
      <java jar="${yc}" fork="true">
        <arg value="@{dir}/@{src}.js" />
        <arg line="-o" />
        <arg value="@{dir}/@{src}-min-yc.js" />
      </java>
    </sequential>
  </macrodef>

  <!-- Compress all js in directory with Yahoo compressor -->
  <macrodef name="yc-js-all">
    <attribute name="dir" />
    <sequential>
      <apply executable="java" parallel="false">
        <fileset dir="@{dir}" includes="*.js" excludes="*-min*.js" />
        <arg line="-jar" />
        <arg path="${yc}" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.js" to="@{dir}/*-min-yc.js" />
        <targetfile />
      </apply>
    </sequential>
  </macrodef>

  <!-- Compress all css in directory with Yahoo compressor -->
  <macrodef name="yc-css-all">
    <attribute name="dir" default="${build.css.dir}" />
    <sequential>
      <apply executable="java" parallel="false">
        <fileset dir="@{dir}" includes="*.css" excludes="*-min*.css" />
        <arg line="-jar" />
        <arg path="${yc}" />
        <arg line="-v --line-break 0" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.css" to="@{dir}/*-min.css" />
        <targetfile />
      </apply>
    </sequential>
  </macrodef>
</project>

  • Интеграция: <import file="build-minifier.xml" /> в вашем файле build.xml, а затем вызовите как обычно ant задачи: <gc-js dir="${build.js.dir}" src="prototype" /> <yc-js-all dir="${build.js.dir}" />

  • Выбор двух minifiers: компилятора Google Closure и компрессора Yahoo, вы должны загрузить их вручную и разместить рядом с файлом xml

  • Minifiers пропустить уже сжатые файлы (заканчивающиеся на -min*)

  • Обычно я делаю три версии script: несжатый (например, prototype.js) для отладки, сжатый компилятором закрытия (prototype-min-gc.js) для производственного сервера, сжатый с помощью Yahoo (prototype-min-yc.js) для устранения неполадок, закрывающий компилятор использует рискованные оптимизации и иногда создает недопустимый сжатый файл, а компрессор Yahoo более безопасен

  • Yahoo-компрессор может минимизировать все файлы в директории с одним макросом, компилятор Closure не может

Ответ 5

Я пробовал два способа:

  • с использованием фильтра сервлета. В режиме производства фильтр активируется и сжимает любые данные, ограниченные URL-адресом, например *.css или *.js
  • с помощью maven и yuicompressor-maven-plugin; сжатие выполнено una-tantum (при сборке производственной войны)

Конечно, последнее решение лучше, так как оно не потребляет ресурсы во время выполнения (мой webapp использует движок Google), и это не усложняет ваш код приложения. Поэтому предположим, что этот последний случай в следующих ответах:

Как он интегрируется? Является ли это частью вашего инструмента сборки, фильтра сервлетов, автономной программы после обработки файла WAR или чего-то еще?

с помощью maven

Легко ли включать и отключать? Очень неудобно пытаться отлаживать миниатюрный script, но также полезно, чтобы разработчик смог проверить, что мини-код ничего не сломает.

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

Работает ли он прозрачно или имеет какие-либо побочные эффекты (кроме тех, которые присущи мини-классификации), которые я должен учитывать в своей повседневной работе?

абсолютно

Какой minifier он использует?

Компрессор YUI

Не хватает ли каких-либо функций, о которых вы можете думать?

нет, он очень полный и простой в использовании

Что вам нравится?

он интегрирован с моим любимым инструментом (maven), и плагин находится в центральном хранилище (хороший гражданин maven)

Ответ 6

Мне кажется, вам нужна библиотека сжатия, например, тег Granule.

http://code.google.com/p/granule/

Это gzip и объединяет javascripts, обернутые g: compress тегом, используя разные методы, также имеет задачу Ant

пример кода:

<g:compress>
  <script type="text/javascript" src="common.js"/>
  <script type="text/javascript" src="closure/goog/base.js"/>
  <script>
       goog.require('goog.dom');
       goog.require('goog.date');
       goog.require('goog.ui.DatePicker');
  </script>
  <script type="text/javascript">
      var dp = new goog.ui.DatePicker();
      dp.render(document.getElementById('datepicker'));
  </script>
</g:compress>
...

Ответ 7

Наш проект обработал его несколькими способами, но мы продолжаем использовать YUI Compressor через наши разные итерации.

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

Теперь среда разработки никогда не использует сжатый JavaScript для целей отладки. Вместо этого мы обрабатываем сжатие в нашем процессе сборки при экспорте нашего приложения в файл WAR.

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

Ответ 8

Я действительно удивлен, что никто не упомянул JAWR - https://jawr.java.net/

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

Как он интегрируется? Является ли это частью вашего инструмента сборки, сервлета фильтр, автономную программу после обработки файла WAR или что-то еще?

Первоначально обработка/тяжелая атлетика при запуске приложения и обслуживании основывалась на servlet. Начиная с 3.x они добавили поддержку интеграции во время сборки.

Поддержка JSP и Facelets предоставляется через пользовательскую библиотеку тегов JSP для импорта обработанных ресурсов. Кроме того, реализуется загрузчик ресурсов JS, который поддерживает загрузку ресурсов со статических HTML-страниц.

Легко ли включать и отключать? Очень неудобно пытаться отлаживать minified script, но он также полезен для разработчика, чтобы иметь возможность проверьте, что минимизация ничего не нарушает.

A debug=on опция доступна для использования перед запуском приложения, и пользовательский параметр GET может быть указан при индивидуальных запросах в производстве для выборочного переключения режима отладки во время выполнения для указанного запроса.

Какой minifier он использует?

Для JS он поддерживает YUI Compressor и JSMin, для CSS я не уверен.

Не хватает ли каких-либо функций, о которых вы можете думать?

Поддержка

SASS приходит на ум. Тем не менее, он поддерживает LESS.

Ответ 9

Это сработало для меня: https://bitbucket.org/m6_russell_francis/yui-compressor-ant-task/wiki/Home

<!-- minimize all static *.css & *.js content -->
<target name="static-content-minify">

    <taskdef name="yuicompressor"
             classname="com.metrosix.yuicompressor.anttask.YuiCompressorTask">
        <classpath>
            <pathelement location="${jar.yui.compressor}"/>
            <pathelement location="${jar.yui.anttask.compressor}" />
        </classpath>
    </taskdef>

    <yuicompressor todir="${build.static.content.min}" charset="utf-8" 
        preserveallsemicolons="true" munge="true" >
        <fileset dir="${src.static.content}">
            <include name="**/*.css"/>
            <include name="**/*.js"/>
        </fileset>
    </yuicompressor>
</target>

Ответ 10

Я пишу структуру для управления сетевыми ресурсами, называемую humpty. Он стремится быть более простым и современным, чем jawr или wro4j, используя WebJars и ServiceLoaders.

Как он интегрируется? Является ли это частью вашего инструмента сборки, фильтра сервлетов, автономной программы после обработки файла WAR или чего-то еще?

В процессе разработки сервлет обрабатывает активы по мере необходимости. Затем активы будут предварительно скомпилированы перед производством и помещены в общую папку, так что единственная часть, которая используется, генерирует правильные включения в HTML.

Легко ли включать и отключать? Очень неудобно пытаться отлаживать миниатюрный script, но также полезно, чтобы разработчик смог проверить, что мини-код ничего не сломает.

Это будет сделано путем переключения между режимами разработки и производства.

Работает ли он прозрачно или имеет какие-либо побочные эффекты (кроме тех, которые присущи мини-классификации), которые я должен учитывать в своей повседневной работе?

Я считаю, что он прозрачен, но сильно поддерживает использование WebJars.

Какой minifier он использует?

Какой бы ни был плагин, который вы используете в своем классе. В настоящее время рассматривается создание плагина для компилятора Google Closure.

Не хватает ли каких-либо функций, о которых вы можете думать?

Еще до релиза, хотя я использую его в производстве. Плагин maven по-прежнему нуждается в большой работе.

Что вам нравится?

Простота просто добавления зависимости для настройки фреймворка

Что вам не нравится?

Это мой ребенок, я люблю все это;)