Tự động hóa trong tối ưu front-end bằng Apache Ant

Như đã giới thiệu, Apache Ant là một công cụ dùng để tự động hóa các thao tác lặp đi lặp lại và có nhiều bước như build ứng dụng Java. Trong bài viết này ta sẽ tìm hiểu cách sử dụng Apache Ant cùng với Google Closure Compiler và YUI Compressor của Yahoo để tối ưu hóa file JavaScript và CSS nhằm mục đích để trang web của chúng ta tải về trình duyệt của người dùng nhanh hơn.

Ta có thể download hai thư viện này tại các địa chỉ sau:
Google Closure Compiler
YUI Compressor

Đầu tiên ta tạo một file ant.properties để lưu trữ đường dẫn của các thư mục mà ta sẽ thao tác. Ví dụ như thư mục chứ các file source .js và .css và thư mục target để xuất ra các file .min.js.

css_dir = public/css js_dir = public/javascript assets_dir = public/assets

Sau đó ta khai báo đoạn xml để import các properties này vào project của mình.

<target name="get_properties"> <property file="ant.properties"> <echo>Imported Properties</echo> </property></target>

Kế tiếp ta khai báo đường dẫn tới các thư viện Closure và YUI compressor, đồng thời ta cũng khai báo các tham số truyền vào khi thực thi bằng dòng lệnh.

<target name="compress_js_tool"> <java fork="true" jar="C:\compiler-latest\compiler.jar"> <arg value="--js"/> <arg value="${source}"/> <arg value="--js_output_file"/> <arg value="${target}"/> </java> <echo>${target}</echo> </target>

Theo khai báo ở trên ta mong muốn ant sẽ tự động gọi lệnh sau: C:\compiler-latest\compiler.jar source.js --js_output_file target.js

<target name="compress_css_tool"> <java fork="true" jar="C:\yui\build\yuicompressor-2.4.7.jar"> <arg value="${source}"> <arg value="-o"> <arg value="${target}"> </java> <echo>${target}</echo> </target>

Tương tự, ta mong muốn ant sẽ tự động chạy lệnh sau: C:\yui\build\yuicompressor-2.4.7.jar sources.css -o target.css
Sau đó ta khai báo hai tác vụ sử dụng 2 công cụ đã khai báo ở trên, cùng với các tham số source và target được cung cấp từ thư mục nào

<target name="compress_js"> <antcall target="compress_js_tool"> <param name="source" value="${js_dir}/main.js" /> <param name="target" value="${js_dir}/main.min.js" /> </antcall> </target> <target name="compress_css"> <antcall target="compress_css_tool"> <param name="source" value="${css_dir}/style.css" /> <param name="target" value="${css_dir}/style.min.css" /> </antcall> </target>

Cuối cùng ta tạo tác vụ khởi tạo để chạy hai tác vụ trên

<target name="initialize" depends="get_properties"> <antcall target="compress_js" /> <antcall target="compress_css" /> <echo>Done!</echo> </target>

Đây là file build.xml hoàn chỉnh

 </?xml version="1.0"?> </project name="Compress javascript" default="initialize"> </target name="get_properties"> <property file="ant.properties" /> <echo>Imported Properties</echo> </target> <target name="compress_js_tool"> <java jar="C:\compiler-latest\compiler.jar" fork="true"> <arg value="--js" /> <arg value="${source}" /> <arg value="--js_output_file" /> <arg value="${target}" /> </java> <echo>${target}</echo> </target> <target name="compress_css_tool"> <java jar="C:\yui\build\yuicompressor-2.4.7.jar" fork="true"> <arg value="${source}" /> <arg value="-o" /> <arg value="${target}" /> </java> <echo>${target}</echo> </target> <target name="compress_js"> <antcall target="compress_js_tool"> <param name="source" value="${js_dir}/main.js" /> <param name="target" value="${js_dir}/main.min.js" /> </antcall> </target> <target name="compress_css"> <antcall target="compress_css_tool"> <param name="source" value="${css_dir}/style.css" /> <param name="target" value="${css_dir}/style.min.css" /> </antcall> </target> <target name="initialize" depends="get_properties"> <!--<mkdir dir="${assets_dir}" />--> <antcall target="compress_js" /> <antcall target="compress_css" /> <echo>Done!</echo> </target> </project>

Kết quả chạy từ dòng lệnh, ta vào thư mục chứ file build.xml và gõ ant




Sau đó ta mở các file .min.js và min.css ra ta sẽ thấy nó được tối ưu rõ rệt về dung lượng và tăng khả năng bảo vệ cho source code javascript.

nguồn: www.butchiso.com