coolx.net

Programming

No.

779

Name.

swindler

Subject.

wro4j (Web Resource Optimizer for Java)

Main Cate.

Javascript

Sub Cate.

Java

Date.

2017-01-02 16:59

Hit.

2255 (121.78.49.66)

File.

css, js 를 merge 하고 minify 해서 사용해야 하는데, 이런 작업들이 개발과정에서의 디버깅에 상당히 불편한 점이 발생한다.

그래서 만든것중에 wro4j 가 있다. (비슷한게 여러개 있다는 얘기.)

http://alexo.github.io/wro4j/

여기 들어가면 only 3 simple steps 라고 되어 있는데,
사실 이게 그렇게 만만하지는 않다.

Step 1: web.xml 설정

<filter>
<filter-name>WebResourceOptimizer</filter-name>
<filter-class>
ro.isdc.wro.http.WroFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>WebResourceOptimizer</filter-name>
<url-pattern>/wro/*</url-pattern>
</filter-mapping>

Step 2 : Create wro.xml

<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">

<group name="g1">
<js>/1.js</js>
<css>/1.css</css>
</group>

</groups>

제일 심플하게 파일 하나로 구성했다.

Step 3: Use Optimized resoruce

<link rel="stylesheet" type="text/css" href="/wro/g1.css" />
<script type="text/javascript" src="/wro/g1.js"></script>

여기서 몇가지 문제가 있는데,
당연히 wro4j.jar 파일를 was에 설치해야 하고,
보다시피 css/js 파일을 wro4j를 통해서 호출해야 하므로, css/js 파일을 was 통해서 서비스를 해야 한다. (뭐 대부분 포트만 연결해서 해결되겠지만..)

하여튼 여러개의 css, js 파일을 만들어두고 실제로 불러서 사용할때는 /wro/groupName.css 와 같이 부르면 자동으로 merge/minify 를 해서 보여준다는 ...

그리고, 좀더 나아가면 LESS / SASS 등도 연동해서 사용이 가능한듯 하다.

[바로가기 링크] : http://coolx.net/cboard/develop/779


[Modify] [Delete]		[Reply] [List]