Làm thế nào để bạn tự động hóa việc rút gọn Javascript cho các ứng dụng web Java của bạn?

Question

Tôi muốn nghe cách bạn muốn tự động hóa việc rút gọn Javascript cho các ứng dụng web Java của mình. Dưới đây là một vài khía cạnh mà tôi đặc biệt quan tâm:

• Làm cách nào để tích hợp ? Đây có phải là một phần của công cụ xây dựng của bạn, một bộ lọc servlet, một chương trình độc lập sau xử lý tệp tin WAR, hoặc một cái gì đó khác không?
• Có phải dễ bật và tắt không? Rất khó để thử và gỡ lỗi một tập lệnh được rút gọn, nhưng nó cũng hữu ích cho một nhà phát triển để có thể kiểm tra rằng việc rút gọn không phá vỡ bất cứ điều gì.
• Sản phẩm có hoạt động minh bạch hay không có bất kỳ tác dụng phụ nào (ngoài những tác dụng vốn có trong việc rút gọn) mà tôi phải xem xét trong công việc hàng ngày của mình không?
• Máy khai thác nào sử dụng?
• Có phải thiếu bất kỳ tính năng nào mà bạn có thể nghĩ đến không?
• Bạn thích điều gì về nó?
• Điều gì không bạn thích điều đó?

Điều này chủ yếu phục vụ như là một tham chiếu cho các dự án tương lai của tôi (và hy vọng các nhà cung cấp khác cũng sẽ tìm thấy thông tin), vì vậy tất cả các công cụ đều thú vị.

(.. Lưu ý rằng đây không phải là một câu hỏi về những minifier là tốt nhất Chúng tôi có rất nhiều những người xung quanh đã được)

Answer 1

Round-up bài

Nếu bạn đăng nội dung mới trong chủ đề này, chỉnh sửa bài này để liên kết với bạn.

• Ant apply task (using YUI Compressor)
• Custom YUI Compressor Ant task
• Maven YUI Compressor plugin
• Granule (for JSP, JSF, Grails, Ant)
• Ant macros for Google Closure compiler
• wro4j (Maven, servlet filters, plain Java, etc)
• ant-yui-compressor (ant task for compressing JS+CSS)
• JAWR
• Minify Maven Plugin
• humpty

Answer 2

tôi đã cố gắng theo hai cách:

1. sử dụng một bộ lọc servlet. Khi ở chế độ sản xuất, bộ lọc được kích hoạt và nó nén bất kỳ dữ liệu nào được liên kết tới URL như * .css hoặc * .js
2. sử dụng maven và yuicompressor-maven-plugin; nén được perfomed una-tantum, (khi lắp ráp chiến tranh sản xuất)

Tất nhiên giải pháp thứ hai là tốt hơn vì nó không tiêu thụ tài nguyên trong thời gian chạy (webapp của tôi đang sử dụng công cụ ứng dụng google) và nó doesn không phức tạp mã ứng dụng của bạn. Vì vậy, giả sử trường hợp sau này trong các câu trả lời sau:

Làm cách nào để tích hợp? Nó là một phần của công cụ xây dựng của bạn, một bộ lọc servlet, một chương trình độc lập sau xử lý tệp tin WAR, hoặc một cái gì đó khác?

sử dụng maven

là nó dễ dàng để kích hoạt và vô hiệu hóa? Rất khó để thử và gỡ lỗi một tập lệnh được rút gọn, nhưng nó cũng hữu ích cho một nhà phát triển để có thể kiểm tra rằng việc rút gọn không phá vỡ bất cứ điều gì.

bạn chỉ kích hoạt khi lắp ráp cuộc chiến cuối cùng; ở chế độ phát triển, bạn thấy phiên bản tài nguyên chưa được nén của mình

Nó hoạt động rõ ràng, hoặc có bất kỳ tác dụng phụ nào (ngoài những điều vốn có trong việc rút gọn) mà tôi phải xem xét hàng ngày công việc?

hoàn toàn

nào minifier nó sử dụng không?

nén YUI

Liệu nó thiếu bất kỳ tính năng mà bạn có thể nghĩ đến?

không, nó là rất đầy đủ và dễ sử dụng

Bạn thích gì về nó?

nó được tích hợp với công cụ yêu thích của tôi (maven) và các plugin là trong kho trung tâm (một maven công dân tốt)

Answer 3

dự án của chúng tôi đã xử lý nó một số cách nhưng chúng tôi vẫn tiếp tục sử dụng YUI Compressor thông qua các lần lặp khác nhau của chúng tôi.

Ban đầu, chúng tôi đã có một servlet xử lý nén cho JavaScript lần đầu tiên mà tệp cụ thể được truy cập; sau đó nó được lưu trữ. Chúng tôi đã có sẵn một hệ thống để xử lý các tệp thuộc tính tùy chỉnh, vì vậy chúng tôi chỉ cập nhật các tệp cấu hình của mình để hỗ trợ bật hoặc tắt máy nén tùy thuộc vào môi trường chúng tôi đang làm việc.

Bây giờ môi trường phát triển không bao giờ sử dụng JavaScript nén cho mục đích gỡ lỗi . Thay vào đó, chúng tôi xử lý nén trong quy trình xây dựng của chúng tôi khi xuất ứng dụng của chúng tôi sang tệp WAR.

Khách hàng của chúng tôi chưa bao giờ nêu ra những lo ngại về việc nén và các nhà phát triển không nhận thấy nó cho đến khi họ quyết định gỡ lỗi JavaScript. Vì vậy, tôi muốn nói nó khá minh bạch với tối thiểu, nếu có, tác dụng phụ.

Answer 4

Chúng tôi đang sử dụng tác vụ Ant để giảm thiểu các tệp js với YUICompressor trong quá trình xây dựng sản xuất và đưa kết quả vào một thư mục riêng biệt. Sau đó, chúng tôi tải các tệp đó lên máy chủ web. Bạn có thể tìm thấy một số ví dụ tốt cho tích hợp YUI + Ant in this blog.

Dưới đây là một ví dụ:

<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> 

Answer 5

tôi nghĩ rằng bạn cần một thư viện nén, cho thẻ mẫu Granule.

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

Nó gzip và kết hợp javascripts bọc bởi g: nén thẻ sử dụng phương pháp khác nhau, cũng có nhiệm vụ Ant cũng mẫu mã

là:

 
<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> 
... 

Answer 6

Tôi đã viết macro ant cho trình biên dịch Google Closure và máy nén Yahoo và bao gồm tệp này trong các dự án web khác nhau.

<?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> 

• tích hợp: <import file="build-minifier.xml" /> trong build.xml của bạn, sau đó gọi nhiệm vụ kiến ​​như thường lệ: <gc-js dir="${build.js.dir}" src="prototype" /><yc-js-all dir="${build.js.dir}" />

• Choice của hai minifiers: trình biên dịch Đóng Google và Yahoo nén, bạn nên tải chúng bằng tay và đặt gần tệp xml

• Trình tối ưu hóa bỏ qua các tệp đã nén (kết thúc bằng -min*)

• Thông thường tôi thực hiện ba phiên bản tập lệnh: không nén (ví dụ:prototype.js) để gỡ lỗi, nén với trình biên dịch đóng cửa (prototype-min-gc.js) cho máy chủ sản xuất, nén với Yahoo (prototype-min-yc.js) để gỡ rối bởi vì trình biên dịch đóng cửa sử dụng tối ưu hóa nguy hiểm và đôi khi tạo file nén không hợp lệ và Yahoo nén là an toàn hơn

• Yahoo nén có thể Thu nhỏ tất cả các tập tin trong một thư mục với macro duy nhất, trình biên dịch Đóng cửa có thể không

Answer 7

tôi nghĩ rằng một trong những công cụ tốt nhất và phù hợp với công việc là wro4j Check-out

Nó tất cả mọi thứ bạn cần:

• dự án Giữ tài nguyên web (js & css) tổ chức tốt
• Merge & rút gọn chúng tại thời gian chạy (sử dụng một bộ lọc đơn giản) hoặc xây dựng theo thời gian (sử dụng maven plugin)
• miễn phí và mã nguồn mở: Phát hành dưới một giấy phép Apache 2.0
• một số công cụ hỗ trợ bởi việc rút gọn wro4j: JSMin, máy nén Đóng cửa Google, YUI vv
• Rất dễ sử dụng. Hỗ trợ Servlet Filter, Plain Java hoặc Spring Cấu hình
• Javascript và CSS Meta Khung Hỗ trợ: CoffeeScript, Ít, Sass vv
• Validation: JSLint, CSSLint vv

có thể chạy trong debug cũng như phương thức sản xuất. Chỉ cần chỉ định tất cả các tệp cần xử lý/xử lý trước và thực hiện phần còn lại.

Bạn có thể chỉ đơn giản bao gồm sáp nhập, minified và nguồn lực nén như thế này:

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

Answer 8

này đã làm việc cho tôi: 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> 

Answer 9

Tôi thực sự ngạc nhiên không ai đề cập JAWR-https://jawr.java.net/

Nó khá trưởng thành và hỗ trợ tất cả các tính năng tiêu chuẩn được mong đợi ed, và nhiều hơn một chút. Đây là cách nó nắm giữ chống lại các tiêu chí xuất sắc của OP.

Làm cách nào để tích hợp? Là một phần của công cụ xây dựng của bạn, một bộ lọc servlet , một chương trình độc lập sau xử lý tệp WAR hoặc một cái gì đó khác?

Ban đầu, công việc xử lý/nâng hạng nặng khi khởi động và phục vụ ứng dụng được dựa trên servlet. Bắt đầu với 3.x họ đã thêm hỗ trợ cho integrating at build time.

Hỗ trợ cho JSP và Facelets được cung cấp thông qua thư viện thẻ JSP tùy chỉnh để nhập tài nguyên đã xử lý. Ngoài ra, trình tải tài nguyên JS được triển khai hỗ trợ loading the resources from static HTML pages.

Bạn có dễ dàng bật và tắt không? Rất khó để thử và gỡ lỗi một tập lệnh được rút gọn của , nhưng cũng hữu ích cho nhà phát triển để có thể kiểm tra xem việc rút gọn không phá vỡ bất kỳ điều gì hay không.

Một lựa chọn debug=on có sẵn để sử dụng trước khi khởi động ứng dụng, và một tham số tùy chỉnh GET có thể được quy định tại yêu cầu riêng trong sản xuất để chuyển sang chế độ debug chọn lọc trong thời gian chạy cho yêu cầu nói.

Bộ lọc nhỏ nào sử dụng?

Đối với JS, nó hỗ trợ Máy nén YUI và JSMin, cho CSS Tôi không chắc chắn.

Ứng dụng có thiếu tính năng nào mà bạn có thể nghĩ không?

SASS hỗ trợ. Điều đó nói rằng, nó hỗ trợ LESS.

Answer 10

Tôi đang viết một khuôn khổ để quản lý nội dung web, được gọi là humpty. Nó nhằm mục đích đơn giản và hiện đại hơn jawr hoặc wro4j bằng cách sử dụng WebJars và ServiceLoaders.

Làm cách nào để tích hợp? Nó là một phần của công cụ xây dựng của bạn, một bộ lọc servlet, một chương trình độc lập sau xử lý tệp tin WAR, hoặc một cái gì đó khác?

Khi phát triển, servlet xử lý nội dung nếu cần. Các tài sản sau đó sẽ được biên dịch trước khi sản xuất và được đặt trong một thư mục công cộng, do đó, phần duy nhất được sử dụng là tạo ra chính xác bao gồm trong HTML.

Bạn có dễ dàng bật và tắt không? Rất khó để thử và gỡ lỗi một tập lệnh được rút gọn, nhưng nó cũng hữu ích cho một nhà phát triển để có thể kiểm tra rằng việc rút gọn không phá vỡ bất cứ điều gì.

Điều đó sẽ được thực hiện bằng cách chuyển đổi giữa chế độ phát triển và chế độ sản xuất.

Sản phẩm có hoạt động minh bạch hay không có tác dụng phụ nào (ngoài những thứ vốn có trong việc rút gọn) mà tôi phải xem xét trong công việc hàng ngày?

Tôi tin rằng đó là minh bạch, nhưng rất có lợi cho việc sử dụng WebJars.

Bộ lọc nhỏ nào sử dụng?

Bất kỳ plugin nào bạn đặt trên đường dẫn lớp học đều sử dụng. Hiện đang xem xét việc viết một plugin cho Trình biên dịch Google Closure.

Ứng dụng có thiếu tính năng nào mà bạn có thể nghĩ không?

Vẫn còn tiền phát hành, mặc dù tôi đang sử dụng nó trong quá trình sản xuất. Plugin maven vẫn cần rất nhiều công việc.

Bạn thích điều gì về nó?

Sự đơn giản chỉ thêm một phụ thuộc vào cấu hình khuôn khổ

bạn không thích điều gì về nó?

Đó là con tôi, tôi yêu tất cả;)