前端js和css的压缩合并之wro4j

me:注：

找了一圈，在java社区和node社区，就没有找到中意的解决方案，总是带有各种各样的毛病。

看来ror社区还是拥有最强悍的设计和构架能力的，也许得益于ruby的精神。

最牛牛的人有时候只要一两个就够了。

下面的文还是不错的，可惜wro4j的愚笨复杂设计啊。

from: 使用wro4j和maven在编译期间压缩js和css文件

<link rel="stylesheet" type="text/css" href="${ctxPath}/css/skin.css"/>   <link rel="stylesheet" type="text/css" href="${ctxPath}/css/jquery-ui-1.8.23.custom.css"/>   <link rel="stylesheet" type="text/css" href="${ctxPath}/css/validationEngine.jquery.css"/>      <script type="text/javascript">var GV = {ctxPath: '${ctxPath}',imgPath: '${ctxPath}/css'};</script>   <script type="text/javascript" src="${ctxPath}/js/jquery-1.7.2.min.js"></script>   <script type="text/javascript" src="${ctxPath}/js/jquery-ui-1.8.23.custom.min.js"></script>   <script type="text/javascript" src="${ctxPath}/js/jquery.validationEngine.js"></script>   <script type="text/javascript" src="${ctxPath}/js/jquery.validationEngine-zh_CN.js"></script>   <script type="text/javascript" src="${ctxPath}/js/jquery.fixedtableheader.min.js"></script>   <script type="text/javascript" src="${ctxPath}/js/roll.js"></script>   <script type="text/javascript" src="${ctxPath}/js/jquery.pagination.js"></script>   <script type="text/javascript" src="${ctxPath}/js/jquery.rooFixed.js"></script>   <script type="text/javascript" src="${ctxPath}/js/jquery.ui.datepicker-zh-CN.js"></script>   <script type="text/javascript" src="${ctxPath}/js/json2.js"></script>   <script type="text/javascript" src="${ctxPath}/js/common.js"></script>   

${platform:cssFile("/wro/basic") }   <script type="text/javascript">var GV = {ctxPath: '${ctxPath}',imgPath: '${ctxPath}/css'};</script>   ${platform:jsFile("/wro/basic") }   ${platform:jsFile("/wro/custom") }   

<wro4j.version>1.6.2</wro4j.version>         ...       <dependency>     <groupId>ro.isdc.wro4j</groupId>     <artifactId>wro4j-core</artifactId>     <version>${wro4j.version}</version>     <exclusions>      <exclusion>         <!-- 因为项目中的其他jar包已经引入了不同版本的slf4j,所以这里避免jar重叠所以不引入 -->       <groupId>org.slf4j</groupId>       <artifactId>slf4j-api</artifactId>      </exclusion>     </exclusions>    </dependency>   

2.添加wro4j maven plugin 

   <plugin>       <groupId>ro.isdc.wro4j</groupId>       <artifactId>wro4j-maven-plugin</artifactId>       <version>${wro4j.version}</version>       <executions>        <execution>         <phase>compile</phase>         <goals>          <goal>run</goal>         </goals>        </execution>       </executions>       <configuration>        <targetGroups>basic,custom</targetGroups>          <!-- 这个配置是告诉wro4j在打包静态资源的时候是否需要最小化文件,开发的时候可以设成false,方便调试 -->        <minimize>true</minimize>        <destinationFolder>${basedir}/src/main/webapp/wro/</destinationFolder>        <contextFolder>${basedir}/src/main/webapp/</contextFolder>      <!-- 这个配置是第二步优化需要用到的,暂时忽略 -->        <wroManagerFactory>com.rootrip.platform.common.web.wro.CustomWroManagerFactory</wroManagerFactory>       </configuration>            </plugin>   

<?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="basic">     <css>/css/basic.css</css>     <css>/css/skin.css</css>     <css>/css/jquery-ui-1.8.23.custom.css</css>     <css>/css/validationEngine.jquery.css</css>          <js>/js/jquery-1.7.2.min.js</js>     <js>/js/jquery-ui-1.8.23.custom.min.js</js>     <js>/js/jquery.validationEngine.js</js>     <js>/js/jquery.fixedtableheader.min.js</js>     <js>/js/roll.js</js>     <js>/js/jquery.pagination.js</js>     <js>/js/jquery.rooFixed.js</js>     <js>/js/jquery.ui.datepicker-zh-CN.js</js>     <js>/js/json2.js</js>    </group>        <group name="custom">     <js>/js/jquery.validationEngine-zh_CN.js</js>     <js>/js/common.js</js>    </group>      </groups>   

<link rel="stylesheet" type="text/css" href="${ctxPath}/wro/basic.css"/>   <script type="text/javascript" src="${ctxPath}/wro/basic.js"></script>   <script type="text/javascript" src="${ctxPath}/wro/custom.js"></script>   

public class DailyNamingStrategy extends TimestampNamingStrategy {        protected final Logger log = LoggerFactory.getLogger(DailyNamingStrategy.class);       @Override    protected long getTimestamp() {     String dateStr = DateUtil.formatDate(new Date(), "yyyyMMddHH");     return Long.valueOf(dateStr);    }             }   

2.创建CustomWroManagerFactory类 

//这个类就是在wro4j-maven-plugin里配置的wroManagerFactory参数   public class CustomWroManagerFactory extends     DefaultStandaloneContextAwareManagerFactory {    public CustomWroManagerFactory() {     setNamingStrategy(new DailyNamingStrategy());    }   }   

public class PlatformFunction {        private static Logger log = LoggerFactory.getLogger(PlatformFunction.class);            private static ConcurrentMap<String, String> staticFileCache = new ConcurrentHashMap<>();        private static AtomicBoolean initialized = new AtomicBoolean(false);        private static final String WRO_Path = "/wro/";        private static final String JS_SCRIPT = "<script type=/"text/javascript/" src=/"%s/"></script>";    private static final String CSS_SCRIPT = "<link rel=/"stylesheet/" type=/"text/css/" href=/"%s/">";        private static String contextPath = null;         /**    * 该方法根据给出的路径,生成js脚本加载标签    * 例如传入参数/wro/custom,该方法会寻找webapp路径下/wro目录中以custom开头,以js后缀结尾的文件名称名称.    * 然后拼成<script type="text/javascript" src="${ctxPath}/wro/custom-20130201.js"></script>返回    * 如果查找到多个文件,返回根据文件名排序最大的文件    * @param str    * @return    */    public static String jsFile(String filePath) {     String jsFile = staticFileCache.get(buildCacheKey(filePath, "js"));     if(jsFile == null) {      log.error("加载js文件失败,缓存中找不到对应的文件[{}]", filePath);     }     return String.format(JS_SCRIPT, jsFile);    }        /**    * 该方法根据给出的路径,生成css脚本加载标签    * 例如传入参数/wro/custom,该方法会寻找webapp路径下/wro目录中以custom开头,以css后缀结尾的文件名称名称.    * 然后拼成<link rel="stylesheet" type="text/css" href="${ctxPath}/wro/basic-20130201.css">返回    * 如果查找到多个文件,返回根据文件名排序最大的文件    * @param str    * @return    */    public static String cssFile(String filePath) {     String cssFile = staticFileCache.get(buildCacheKey(filePath, "css"));     if(cssFile == null) {      log.error("加载css文件失败,缓存中找不到对应的文件[{}]", filePath);     }     return String.format(CSS_SCRIPT, cssFile);    }        public static void init() throws IOException {     if(initialized.compareAndSet(false, true)) {      ServletContext sc = Platform.getInstance().getServletContext();      if(sc == null) {       throw new PlatformException("查找静态资源的时候的时候发现servlet context 为null");      }      contextPath = Platform.getInstance().getContextPath();      File wroDirectory = new ServletContextResource(sc, WRO_Path).getFile();      if(!wroDirectory.exists() || !wroDirectory.isDirectory()) {       throw new PlatformException("查找静态资源的时候发现对应目录不存在[" + wroDirectory.getAbsolutePath() + "]");      }      //将wro目录下已有文件加入缓存      for(File file : wroDirectory.listFiles()) {       handleNewFile(file);      }      //监控wro目录,如果有文件生成,则判断是否是较新的文件,是的话则把文件名加入缓存      new Thread(new WroFileWatcher(wroDirectory.getAbsolutePath())).start();     }    }       private static void handleNewFile(File file) {     String fileName = file.getName();     Pattern p = Pattern.compile("^(//w+)//-//d+//.(js|css)$");     Matcher m = p.matcher(fileName);     if(!m.find() || m.groupCount() < 2) return;     String fakeName = m.group(1);     String fileType = m.group(2);     //暂时限定只能匹配/wro/目录下的文件     String key = buildCacheKey(WRO_Path + fakeName, fileType);     if(staticFileCache.putIfAbsent(key, fileName) != null) {      synchronized(staticFileCache) {       String cachedFileName = staticFileCache.get(key);       if(fileName.compareTo(cachedFileName) > 0) {        staticFileCache.put(key, contextPath + WRO_Path + fileName);       }      }     }    }        private static String buildCacheKey(String fakeName, String fileType) {     return fakeName + "-" + fileType;    }        static class WroFileWatcher implements Runnable {          private static Logger log = LoggerFactory.getLogger(WroFileWatcher.class);          private String wroAbsolutePathStr;          public WroFileWatcher(String wroPathStr) {      this.wroAbsolutePathStr = wroPathStr;     }        @Override     public void run() {      Path path = Paths.get(wroAbsolutePathStr);      File wroDirectory = path.toFile();      if(!wroDirectory.exists() || !wroDirectory.isDirectory()) {       String message = "监控wro目录的时候发现对应目录不存在[" + wroAbsolutePathStr + "]";       log.error(message);       throw new PlatformException(message);      }      log.warn("开始监控wro目录[{}]", wroAbsolutePathStr);      try {       WatchService watcher = FileSystems.getDefault().newWatchService();       path.register(watcher, StandardWatchEventKinds.ENTRY_CREATE);              while (true) {        WatchKey key = null;        try {         key = watcher.take();        } catch (InterruptedException e) {         log.error("", e);         continue;        }        for (WatchEvent<?> event : key.pollEvents()) {         if (event.kind() == StandardWatchEventKinds.OVERFLOW) {          continue;         }         WatchEvent<Path> e = (WatchEvent<Path>) event;         Path filePath = e.context();         handleNewFile(filePath.toFile());        }        if (!key.reset()) {         break;        }       }      } catch (IOException e) {       log.error("监控wro目录发生错误", e);      }      log.warn("停止监控wro目录[{}]", wroAbsolutePathStr);     }    }   }   

+