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

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

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

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

올림 포스트

이 스레드에 새로운 것을 게시하는 경우이 게시물을 편집하여 귀하의 게시물에 링크하십시오.

• Ant apply작업 (YUI Compressor 사용)
• 사용자 지정 YUI Compressor Ant 작업
• Maven YUI Compressor 플러그인
• Granule (JSP, JSF, Grails, Ant 용)
• Google Closure 컴파일러 용 Ant 매크로
• wro4j (Maven, 서블릿 필터, 일반 Java 등)
• ant-yui-compressor (JS + CSS 압축을위한 ant 작업)
• JAWR
• Maven 플러그인 축소
• 험한
• execTerser를 사용한 Ant 태스크

우리는 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.

우리 프로젝트는 여러 가지 방법으로 처리했지만 다른 반복을 통해 YUI Compressor 를 계속 사용했습니다 .

처음에는 특정 파일에 처음 액세스 할 때 JavaScript의 압축을 처리하는 서블릿이있었습니다. 그런 다음 캐시되었습니다. 우리는 이미 사용자 정의 속성 파일을 처리 할 시스템을 갖추고 있었기 때문에 작업중인 환경에 따라 압축기 활성화 또는 비활성화를 지원하도록 구성 파일을 업데이트했습니다.

이제 개발 환경은 디버깅 목적으로 압축 된 JavaScript를 사용하지 않습니다. 대신 애플리케이션을 WAR 파일로 내보낼 때 빌드 프로세스에서 압축을 처리합니다.

우리의 클라이언트는 압축에 대한 우려를 제기 한 적이 없으며 개발자는 JavaScript를 디버깅 할 때까지이를 알아 차리지 못합니다. 그래서 나는 그것이 최소한의 측면 영향으로 다소 투명하다고 말하고 싶습니다.

이것은 나를 위해 일했습니다 : 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>

저는 humpty 라는 웹 자산 관리를위한 프레임 워크를 작성하고 있습니다. WebJars 및 ServiceLoader를 사용하여 jawr 또는 wro4j보다 더 간단하고 현대적인 것을 목표로합니다.

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

개발 과정에서 서블릿은 필요에 따라 자산을 처리합니다. 그런 다음 에셋은 프로덕션 전에 미리 컴파일되어 공용 폴더에 배치되므로 사용되는 유일한 부분은 HTML에 올바른 포함을 생성하는 것입니다.

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

이는 개발 모드와 프로덕션 모드 사이를 전환하여 수행됩니다.

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

나는 그것이 투명하다고 믿지만 WebJars의 사용을 강력히 선호합니다.

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

클래스 경로에 넣은 플러그인이 사용하는 플러그인. 현재 Google Closure Compiler 용 플러그인 작성을 검토 중입니다.

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

프로덕션에서 사용하고 있지만 아직 시험판입니다. maven 플러그인은 여전히 ​​많은 작업이 필요합니다.

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

프레임 워크 구성을위한 종속성 추가의 단순성

어떤 점이 마음에 들지 않습니까?

그것은 나의 아기, 나는 그것을 모두 사랑한다;)

여기 파티에 정말 늦었지만 다른 답변을 찾는 사람이 여전히 도움이 될 것이라고 생각했습니다.

YUI Compressor를 사용하려고 시도한 후 최신 버전의 jQuery 및 Prism (단일 파일로 압축하려는 프로젝트에 필요한 두 개의 주요 타사 JS 라이브러리)과 호환되지 않는다는 사실에 실망했습니다. 내가 사용하기로 결정 그래서 Terser ES6 +를 지원 추하게-JS의 포크입니다. <exec>작업을 사용하여 직접 실행할 수는 없었지만 Windows 명령 줄 방법을 사용하는 것은 적어도 Win 10에서 작동합니다 (그렇지 않으면 작동하지 않는다는 말은 아니지만 이것은 매우 쉬운 해결 방법이었습니다). Path 시스템 변수에 다른 것을 추가 할 필요가 없습니다 (일반적으로 Node.JS는 설치 중에 추가됨). 먼저 ANT <concat>작업을 사용하여 크고 압축되지 않은 파일을 만듭니다. <fileset>순서를 유지하므로 사용하십시오 (중요한 경우 어쨌든).

<concat destfile="${js-big-file}" encoding="UTF-8" outputencoding="UTF-8" fixlastline="true">
   <filelist refid="js-input-filelist"/>
</concat>

그런 다음이 <exec>작업을 사용하여 Terser와 같은 NPM 프로그램을 실행합니다. 이 작업에 대한 Apache 매뉴얼 페이지는 이것이 .bat 파일을 실행하기위한 Windows 해결 방법이라고 표시했지만 실제로는 거의 모든 명령 줄 응용 프로그램을 실행할 수 있습니다 ( <exec>이상하게도 찾을 수없는 응용 프로그램 포함 ).

<exec executable="cmd">
   <arg value="/c"/>
   <arg value="terser"/>
   <arg value="${js-big-file}" />
   <arg value="-o" />
   <arg value="${smaller-js-file}"/>  
</exec>

통합 하시겠습니까? 이것은 ANT 빌드 스크립트 (자바 웹 애플리케이션 자체가 아니라 Java를 사용하여 HTML5 출력을 빌드하는 무엇보다도 사용자 정의 JavaScript를 지원하는 DITA Open Toolkit 플러그인)의 일부이므로 통합은 추가하는 것 이상이 아닙니다. 작업을 새 대상에 추가합니다 (기본값 설정 및 입력 매개 변수 확인과 관련된 더 많은 코드가 있습니다!).

활성화 / 비활성화하기가 쉽습니까? 제 경우에는 JS 파일 빌드 및 축소를 포함하기 위해 ANT 빌드에 전달하는 매개 변수가 있습니다. 예, 매개 변수를 '예'로 설정 한 경우에만이 대상을 수행합니다. ANT 빌드에서 설정하는 것은 매우 쉽습니다.

투명 지금까지는 내가 포함하고있는 여러 JS 파일에 영향을 미치지 않는 것으로 보입니다. 그들 중 일부는 내 소유이며 (저는 어떤 식 으로든 JS 전문가가 아닙니다) 일부는 제가 언급했듯이 일반적인 JS 라이브러리입니다.

Minifier Terser이지만이 방법으로 명령 줄 입력으로 축소 된 거의 모든 것을 사용할 수 있습니다.

기능이 부족합니까? Terser 는 JavaScript 에서만 작동합니다. 내 CSS 파일에 대해 동일한 작업을 수행하려면 (내가하는 작업) YUI Compressor를 사용합니다.

마찬가지로 그 그것은 현재 활성화 된 프로젝트이며, 좋은 지원을하고 있습니다. 또한 현재 구현 (ANT <exec>대상을 통해서만 호출 )을 사용하면 향후 다른 것을 사용해야 할 경우 미니 파이어를 교체 할 수 있습니다.

Node.JS가 필요하다는 것을 좋아하지 마십시오. Node.JS에 반대하는 것은 없습니다.이 특정 프로젝트에는 그렇지 않으면 필요하지 않습니다. 이를 위해 YUI Compressor와 같은 Java .jar 파일을 사용하는 것을 선호합니다 (필요한 경우 플러그인으로 쉽게 배포 할 수 있음).