Java 웹 애플리케이션에 대한 Javascript 축소를 어떻게 자동화합니까? WAR 파일을

Java 웹 응용 프로그램에 대한 Javascript 축소를 자동화하는 방법을 듣고 싶습니다. 특히 관심이있는 몇 가지 측면은 다음과 같습니다.

  • 어떻게 통합됩니까? 빌드 도구, 서블릿 필터, WAR 파일을 사후 처리하는 독립형 프로그램 또는 다른 것의 일부입니까?
  • 그것은가 가능하기 쉽고 사용 안 함 ? 축소 된 스크립트를 시도하고 디버그하는 것은 매우 재미 없지만 개발자가 축소로 인해 아무것도 손상되지 않는지 테스트 할 수있는 것도 유용합니다.
  • 투명하게 작동합니까 , 아니면 일상적인 작업에서 고려해야하는 부작용 (최소화에 내재 된 것 제외)이 있습니까?
  • 어떤 축소기를 사용합니까?
  • 생각할 수 있는 기능부족 합니까 ?
  • 어떤 점이 마음에 드십니까?
  • 어떤 점이 마음에 들지 않습니까?

이것은 대부분 내 미래 프로젝트에 대한 참고 자료가 될 것입니다 (그리고 다른 SOer도 유익하다고 생각할 것입니다). 그래서 모든 종류의 도구가 흥미 롭습니다.

( 이것은 어떤 minifier가 가장 좋은지에 대한 질문이 아닙니다 . 우리는 이미 주변에 많은 것을 가지고 있습니다.)



답변


답변

우리는 Ant 작업을 사용하여 프로덕션 빌드 중에 YUICompressor로 js 파일을 축소하고 결과를 별도의 폴더에 넣습니다. 그런 다음 해당 파일을 웹 서버에 업로드합니다. 이 블로그에서 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>


답변

작업에 가장 적합한 도구 중 하나는 wro4j 라고 생각 합니다. https://github.com/wro4j/wro4j를 확인 하십시오.

필요한 모든 것을 수행합니다.

  • 프로젝트 웹 리소스 (js 및 css)를 잘 정리하십시오.
  • 런타임 (간단한 필터 사용) 또는 빌드시 (Maven 플러그인 사용)에 병합 및 축소
  • 무료 및 오픈 소스 : Apache 2.0 라이선스에 따라 출시됨
  • wro4j에서 지원하는 몇 가지 축소 도구 : JsMin, Google Closure 압축기, YUI 등
  • 사용하기 매우 쉽습니다. 서블릿 필터, 일반 Java 또는 Spring 구성 지원
  • 자바 스크립트 및 CSS 메타 프레임 워크 지원 : CoffeeScript, Less, Sass 등
  • 유효성 검사 : JSLint, CSSLint 등

디버그 및 프로덕션 모드에서 실행할 수 있습니다. 처리 / 사전 처리해야하는 모든 파일을 지정하기 만하면 나머지는 수행됩니다.

다음과 같이 병합, 축소 및 압축 된 리소스를 포함 할 수 있습니다.

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


답변

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="--js=@{dir}/@{src}.js" />
        <arg line="--js_output_file=@{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}" />

  • 두 가지 축소 기 선택 : Google Closure 컴파일러 및 Yahoo 압축기, 수동으로 다운로드하여 xml 파일 근처에 배치해야합니다.

  • 축소 기는 이미 압축 된 파일을 건너 뜁니다 (으로 끝남 -min*).

  • 비 압축 (예 : 일반적으로 나는 스크립트의 세 가지 버전 확인 prototype.js) 디버깅, 폐쇄 컴파일러 (압축 prototype-min-gc.js야후 (압축 프로덕션 서버에 대한) prototype-min-yc.js폐쇄 컴파일러는 위험한 최적화를 사용하고 때로는 잘못된 압축 파일을 생성 및 야후 압축기가 더 안전하기 때문에) 문제 해결을

  • Yahoo 압축기는 단일 매크로로 디렉터리의 모든 파일을 축소 할 수 있지만 Closure 컴파일러는


답변

두 가지 방법을 시도했습니다.

  1. 서블릿 필터를 사용합니다. 프로덕션 모드에서 필터가 활성화되고 * .css 또는 * .js와 같은 URL에 바인딩 된 모든 데이터를 압축합니다.
  2. maven 및 yuicompressor-maven-plugin 사용 ; 압축은 una-tantum으로 수행됩니다 ( 생산 전쟁을 조립할 때 )

물론 후자의 솔루션은 런타임에 리소스를 소비하지 않고 (내 웹앱이 Google 앱 엔진을 사용하고 있음) 애플리케이션 코드를 복잡하게 만들지 않기 때문에 더 좋습니다. 따라서 다음 답변에서 후자의 경우를 가정하십시오.

어떻게 통합됩니까? 빌드 도구, 서블릿 필터, WAR 파일을 사후 처리하는 독립형 프로그램 또는 다른 것의 일부입니까?

maven 사용

활성화 및 비활성화가 쉽습니까? 축소 된 스크립트를 시도하고 디버깅하는 것은 매우 재미 없지만 개발자가 축소로 인해 아무것도 손상되지 않는지 테스트 할 수있는 것도 유용합니다.

마지막 전쟁을 조립할 때만 활성화합니다. 개발 모드에서는 압축되지 않은 버전의 리소스를 볼 수 있습니다.

투명하게 작동합니까, 아니면 일상적인 작업에서 고려해야 할 부작용 (최소화에 내재 된 것 제외)이 있습니까?

물론

어떤 축소기를 사용합니까?

YUI 압축기

생각할 수있는 기능이 부족합니까?

아니요, 매우 완전하고 사용하기 쉽습니다.

어떤 점이 마음에 드십니까?

내가 가장 좋아하는 도구 (maven)와 통합되고 플러그인은 중앙 저장소 (좋은 maven 시민)에 있습니다.


답변

예를 들어 Granule 태그와 같은 압축 라이브러리가 필요하다고 생각합니다.

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

다른 방법을 사용하여 g : compress 태그로 래핑 된 자바 스크립트를 gzip하고 결합하며 Ant 작업도 있습니다.

코드 샘플은 다음과 같습니다.

<g : 압축>
  <script type = "text / javascript"src = "common.js"/>
  <script type = "text / javascript"src = "closure / goog / base.js"/>
  <스크립트>
       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 : 압축>
...


답변

난 정말 아무도 언급하지 놀랐어요 JAWR을https://jawr.github.io

꽤 성숙하고 예상되는 모든 표준 기능과 그 이상을 지원합니다. OP의 우수한 기준에 반하는 방법은 다음과 같습니다.

어떻게 통합됩니까? 빌드 도구, 서블릿 필터, WAR 파일을 사후 처리하는 독립형 프로그램 또는 다른 것의 일부입니까?

원래는 응용 프로그램 시작시 처리 / 무거운 작업을 수행했으며 서비스는 서블릿 을 기반으로했습니다 . 3.x부터 그들은 빌드시 통합 지원을 추가 했습니다 .

처리 된 자원을 가져 오기 위해 사용자 정의 JSP 태그 라이브러리를 통해 JSP 및 Facelet에 대한 지원이 제공됩니다. 그 외에도 정적 HTML 페이지에서 리소스로드 를 지원하는 JS 리소스 로더가 구현 됩니다.

활성화 및 비활성화가 쉽습니까? 축소 된 스크립트를 시도하고 디버깅하는 것은 매우 재미 없지만 개발자가 축소로 인해 아무것도 손상되지 않는지 테스트 할 수있는 것도 유용합니다.

debug=on애플리케이션 시작 전에 사용할 수 있는 옵션이 GET있으며 프로덕션의 개별 요청에서 사용자 지정 매개 변수를 지정하여 해당 요청에 대해 런타임시 선택적으로 디버그 모드를 전환 할 수 있습니다.

어떤 축소기를 사용합니까?

JS의 경우 YUI Compressor 및 JSMin을 지원하지만 CSS의 경우 확실하지 않습니다.

생각할 수있는 기능이 부족합니까?

SASS지원이 떠 오릅니다. 즉, LESS.