Code Monkey home page Code Monkey logo

granule's Introduction

Overview

Granule is an optimization solution for Java-based web applications (JSP, JSF, Grails). It combines and compresses JavaScript and CSS files into less granulated packages, increasing speed and saving bandwidth.

The granule solution includes:

  • JSP Tag library. You just need put the tag around your StyleSheets and JavaScripts to compress and combine them.
  • Ant task, to include pre-compressing in your build scripts.

Example

Granule can automatically choose minimization algorithms by content from simple whitespace removal algorithms to advanced methods as Google Closure Compiler. It helps integrate Google Closure Library by automatically calculating dependencies between JS files and providing caching or pre-compiling capabilities.

The library organizes work with large sets of web files. It has two modes: development and production, configuration of those can be tuned separately up to turning off any effect of the library at all.

The library is released under business friendly Apache 2.0 Open Source License. For JDK1.5 use Granule Closure Compiler.

List of features

  • Combine and compresses JS and CSS using different methods: on fly or in build process, CSS and JS fast compression or more sophisticated Google Closure compression, or just simple file combining.
  • No-lock in solution. The tag just put around existing scripts. The tag can be turn on/off on the different levels: page and application.
  • Debug and production modes.
  • Calculate dependencies using Closure Library package/namespace system.
  • Can automatically choose optimization methods.
  • Multiple combinations of JS/CSS even with different compression methods on one page.
  • Support JSP includes.
  • Several types of cache, memory and file.
  • Automatically regenerates the bundle if you modify an included file.
  • Proxy-friendly GZip support.
  • Rewrites relative URLs in your CSS files.
  • JSP, JSF, Grails integration.
  • Multiple loggers support (SLF4J, Log4J, Apache Logger)
  • Can be setup to preserve license headers of JS libraries.
  • JDK1.5 and higher even for Google Closure Compiler.

Installation Granule Tag Library

  1. Download the binary distribution of Granule Tag Library by following this URL: http://code.google.com/p/granule/downloads/list (granuleNNN.zip) and unpack the compressed file.

  2. Copy granuleNNN.jar in the distribution’s ‘lib’ directory to your web applications WEB-NF\lib directory.

  3. To use the granule compress tag, you must include taglib directive <%@ taglib uri="http://granule.com/tags" prefix="g" %> at the top of each JSP that uses this library.

  4. Copy the and declarations from web.xml (look below) from compressed file into your /WEB-INF/web.xml

     <servlet>
     	<servlet-name>CompressServlet</servlet-name>
     	<servlet-class>com.granule.CompressServlet</servlet-class>
     	<load-on-startup>1</load-on-startup>
     </servlet>
     <servlet-mapping>
     	<servlet-name>CompressServlet</servlet-name>
     	<url-pattern>/combined.js</url-pattern>
     </servlet-mapping>
     <servlet-mapping>
     	<servlet-name>CompressServlet</servlet-name>
     	<url-pattern>/combined.css</url-pattern>
     </servlet-mapping>
    
  5. Put <g:compress> tags around the lists of script decorations (JS or CSS). For example -

     <g:compress>
       <link rel="stylesheet" type="text/css" href="css/dp.css"/>
       <link rel="stylesheet" type="text/css" href="css/demo.css"/>	
     </g:compress>
     ...
     <div id="datepicker"></div>
       <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>
     ...
    
  6. Done. Run your web application and check output html source. It should convert CSS and JS declarations similar to this.

    <script src="/combined.js?id=4658acf30"/>

granule's People

Contributors

dariowunsch avatar jonathanwalsh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

granule's Issues

Problem when contextPath = "/"

The result give me <script src="//combined?id=xxxx" .../> (problem is 2 "/")

i have a quickfix patch here ;

diff --git a/tag-main/src/com/granule/CompressTagHandler.java b/tag-main/src/com/granule/CompressTagHandler.java
index 4e9ed57..4250c43 100644
--- a/tag-main/src/com/granule/CompressTagHandler.java
+++ b/tag-main/src/com/granule/CompressTagHandler.java
@@ -51,7 +51,7 @@ public class CompressTagHandler {

 private static final String JS_DUPLICATES = "granule_js_duplicates";

 private static final String CSS_DUPLICATES = "granule_css_duplicates";
 public CompressTagHandler(String id, String method, String options, String basepath) {

     this.id = id;

     this.method = method;

@@ -151,7 +151,12 @@ public class CompressTagHandler {
correction -= e.getEnd() - e.getBegin();

                     } else {

                         if (fragmentDescriptors.size() > 0) {
  •                            String newText = "<script src=\"" + request.getContextPath() + "/combined.js?id="
    
  •                            String contextPath = request.getContextPath();
    
  •                            if (request.getContextPath() == null || request.getContextPath().equals("") || request.getContextPath().equals("/"))
    
  •                            {
    
  •                                contextPath = "";
    
  •                            }
    
  •                            String newText = "<script src=\"" + contextPath + "/combined.js?id="
    
                                     + bundleId + "\"></script>";
    
                             newBody = newBody.substring(0, e.getBegin() + correction) + newText
    
                                     + newBody.substring(e.getEnd() + correction);
    

@@ -341,9 +346,13 @@ public class CompressTagHandler {
int p = ld.index;

             sb.append(chunk.substring(start, links.get(p).getBegin()));

             if (ld.scriptId != null) {
  •                if (request.getContextPath() == null || request.getContextPath().equals("") || request.getContextPath().equals("/"))
    
  •                {
    
  •                    contextPath = "";
    
  •                }
    
                 Attribute a = links.get(p).getAttributes().get("href");
    
                 sb.append(chunk.substring(links.get(p).getBegin(), a.getBegin()));
    
  •                sb.append("href=\"").append(request.getContextPath()).
    
  •                sb.append("href=\"").append(contextPath).
    
                         append("/combined.css?id=").
    
                         append(ld.scriptId)
    
                         .append("\" ");
    

@@ -366,6 +375,6 @@ public class CompressTagHandler {
private HashSet getCssDuplicatesHash(IRequestProxy request) {

     return (HashSet<String>) request.getAttribute(CSS_DUPLICATES);

 }
 private static final Logger logger = LoggerFactory.getLogger(CompressTagHandler.class);

}

Support deterministic id generation

When load balanced and depending the technology of the load balancer the current id generation prevent the resources to be hit on load balanced middled. Would be great to get a deterministic algorithm to solve it. The idea is to get the same request on all middles for the same resources whatever the local state is.

Combined.js is not compressed

granule is minifying the css file as combiled.css but it is not compressing combined.js.
Can you tell me what steps are needed to do that.

Thanks in advance

Is there any way we could make the combined resource cacheble at browser level

First let me thanks for this fantastic software !!

My doubt is is there a way we could make the combine file remembered at browsers cache.. as any .css file or .js file will return HTTP code 304 (as no changes and loads from cache), it would improve the site loading time and performance.

But when we combine all resources it always return with HTTP 200 code that means every time page load the combine resources loads fresh copy..

image

Thanks,

Enable/disable granule compression

I want to add a feature on granule, and I don't know if it already exists.
My idea is to use a method="none" in which the granule tag only adds the basepath scripts and links.
My idea with this feature is to provide a easy way to debug/analyze problems in any environment by always using granule by this way:

<granule:compress method="${param.granuleIgnore?'none' : 'closure-compiler'}">
    <script ...
  <granule:compress/>

So I can add a ?granuleIgnore=true on the request and see the same files I have on code.

Any feature like this, or can I start working on it?

does it work with spring-boot?

I am currently using spring boot and gradle to build my project.

I have followed instruction and I am facing below error.

com.granule.JSCompileException: Granule cache was loaded not on the server start-up. Recommended to add the parameter 1 into servlet configuration in web.xml.
at com.granule.cache.TagCacheFactory.getInstance(TagCacheFactory.java:43) ~[granule1.0.9.jar:1.0.9]
at com.granule.CompressTagHandler.processChunk(CompressTagHandler.java:306) ~[granule1.0.9.jar:1.0.9]
at com.granule.CompressTagHandler.handleTag(CompressTagHandler.java:198) ~[granule1.0.9.jar:1.0.9]
at com.granule.CompressTag.doAfterBody(CompressTag.java:66) ~[granule1.0.9.jar:1.0.9]
at org.apache.jsp.WEB_002dINF.jsp.orderconfirmation_jsp._jspx_meth_g_005fcompress_005f0(orderconfirmation_jsp.java:371) ~[?:?]

CSS relative and absolute paths

Hi!

It seems like granule changes paths in CSS files even if they start with "/" but it should not happen.
If I try to use absolute path without the domain name in CSS (located at /module/_ui/desktop/themes/file.css) like this:

background-image: url('/module/_ui/desktop/themes/images/someimage.jpg');

granule adds the relative path and the line ends up like this:

background-image: url('_ui/desktop/themes/module/_ui/desktop/themes/images/someimage.jpg');

Is there possibly some undocumented feature that fixes this?

Best regards,
Janis

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.