Topic
  • 6 replies
  • Latest Post - ‏2014-04-15T18:50:06Z by arronla
arronla
arronla
94 Posts

Pinned topic [Tutorial] How to minify and perform dojo build on the Sample Plugin

‏2014-04-13T18:18:07Z |

Performing a dojo build to minify your plugin's javascript is a great way to deliver extremely performant and efficient code.  

I have seen a few people struggle with this so I modified ICN's 2.0.2 Sample Plugin to do this minification.  You can refer to this as a sample on how to do it for other plugins.  This is not using the newest dojo build strategy but you should be able to adapt it to the newest one if you like.

1) Modify SamplePlugin.js and make it reference all the other javascript files you want to included in your minified script.  Add it to the require sections already in the SamplePlugin.js.

2) Use the attached build.xml and place it into the root SamplePlugin directory.  It contains two new targets to extract the necessary dojo/ecm files and then to perform the dojo build.

3) Modify the build.xml to provide values for "dojo_src_zip" and "icn_path".  The build.xml will have more instructions.

4) Place the new samplePlugin.profile.js into the root SamplePlugin directory as well.  This file contains the specification on the layers to create and the layers it needs to reference to do the dojo build.

5) Run the new "compress_js" target.  The output is a gzipped SamplePlugin.js.jgz in the output directory.  Put this file as the getScript() in SamplePlugin.java.  Put SamplePlugin.js as the debug script.

 

Attachments

  • PiGG
    PiGG
    71 Posts

    Re: [Tutorial] How to minify and perform dojo build on the Sample Plugin

    ‏2014-04-15T16:01:28Z  

    Thank You very much arronla.

    This is a great step by step instructions.  I was able to deploy the plugin just fine. 

    I have one more question.

    in SamplePlugin.jar, I can remove "SamplePlugin.js" and deploy but when I remove other javascript files ConfigurationPane.js, CustomAction.js, MessageDialog.js or so on, I get an error when I deploy it.  Since "SamplePlugin.js" has combined all javascript files, I though it was ok to remove them.  Am I wrong?

  • arronla
    arronla
    94 Posts

    Re: [Tutorial] How to minify and perform dojo build on the Sample Plugin

    ‏2014-04-15T16:57:23Z  
    • PiGG
    • ‏2014-04-15T16:01:28Z

    Thank You very much arronla.

    This is a great step by step instructions.  I was able to deploy the plugin just fine. 

    I have one more question.

    in SamplePlugin.jar, I can remove "SamplePlugin.js" and deploy but when I remove other javascript files ConfigurationPane.js, CustomAction.js, MessageDialog.js or so on, I get an error when I deploy it.  Since "SamplePlugin.js" has combined all javascript files, I though it was ok to remove them.  Am I wrong?

    What error are you getting? If it's those missing file errors, then most likely you haven't included SamplePlugin.js.jgz inside the SamplePlugin.java.  If that's not the case, you have not added all the dependent files inside SamplePlugin.js's require statements.  Make sure SamplePlugin.js refers to every javascript file that you want to include in the minification.  It must find all of them from the requires.

  • PiGG
    PiGG
    71 Posts

    Re: [Tutorial] How to minify and perform dojo build on the Sample Plugin

    ‏2014-04-15T17:11:11Z  
    • arronla
    • ‏2014-04-15T16:57:23Z

    What error are you getting? If it's those missing file errors, then most likely you haven't included SamplePlugin.js.jgz inside the SamplePlugin.java.  If that's not the case, you have not added all the dependent files inside SamplePlugin.js's require statements.  Make sure SamplePlugin.js refers to every javascript file that you want to include in the minification.  It must find all of them from the requires.

    arronla,

    Please bear with me.  So, if I did it correctly (meaning "SamplePlugin.js.jgz" has all references to other javascript files), there can be no javascript files at all.  Only "SamplePlugin.js.jgz" is needed in the jar file, right?

  • arronla
    arronla
    94 Posts

    Re: [Tutorial] How to minify and perform dojo build on the Sample Plugin

    ‏2014-04-15T18:14:35Z  
    • PiGG
    • ‏2014-04-15T17:11:11Z

    arronla,

    Please bear with me.  So, if I did it correctly (meaning "SamplePlugin.js.jgz" has all references to other javascript files), there can be no javascript files at all.  Only "SamplePlugin.js.jgz" is needed in the jar file, right?

    If everything is minified correctly, you should only need SamplePlugin.js.jgz.  The safest way to just to include everything but those files will not be loaded at all.  For example, include both the SamplePlugin.js.jgz and set SamplePlugin.js as the "debug script" in SamplePlugin.java.  This way it will do individual loading to figure out errors.

    The best way to figure out if you minified everything correctly, is to just load up server and use chrome developer tool or firefox's firebug look at how many resources are loaded.  It should only be SamplePlugin.js.jgz.

  • PiGG
    PiGG
    71 Posts

    Re: [Tutorial] How to minify and perform dojo build on the Sample Plugin

    ‏2014-04-15T18:44:29Z  
    • arronla
    • ‏2014-04-15T18:14:35Z

    If everything is minified correctly, you should only need SamplePlugin.js.jgz.  The safest way to just to include everything but those files will not be loaded at all.  For example, include both the SamplePlugin.js.jgz and set SamplePlugin.js as the "debug script" in SamplePlugin.java.  This way it will do individual loading to figure out errors.

    The best way to figure out if you minified everything correctly, is to just load up server and use chrome developer tool or firefox's firebug look at how many resources are loaded.  It should only be SamplePlugin.js.jgz.

    arronla,

    At this point, I am verv very happy with the result.  From the Firebug, although it does show it is loading one more javascript, I have cut down the number of requests by a lot.  Like you suggested, I will include all my js files in the jar.  Now, I am going to use your instructions to work on my real project.  I think Redbook should include your instructions in the next release.   

    You have definitely guided me to the right direction...I will continue to work on the dojo custom build as I learn more. 

    I feel like I have made about one light year worth of progress, if I compare to last week.  Again, THANK YOU VERY MUCH !!!!!. 

    How do you do this? set SamplePlugin.js as the "debug script" in SamplePlugin.java  Is there getDebugScript () in SamplePlugin.java?

  • arronla
    arronla
    94 Posts

    Re: [Tutorial] How to minify and perform dojo build on the Sample Plugin

    ‏2014-04-15T18:50:06Z  
    • arronla
    • ‏2014-04-15T18:14:35Z

    If everything is minified correctly, you should only need SamplePlugin.js.jgz.  The safest way to just to include everything but those files will not be loaded at all.  For example, include both the SamplePlugin.js.jgz and set SamplePlugin.js as the "debug script" in SamplePlugin.java.  This way it will do individual loading to figure out errors.

    The best way to figure out if you minified everything correctly, is to just load up server and use chrome developer tool or firefox's firebug look at how many resources are loaded.  It should only be SamplePlugin.js.jgz.

    I am glad I was able to help!

    Yes there's a debug script you can set inside Plugin.java.  Once this is set, you can now just add "debug=true" as an additional parameter and it will automatically load all the individual files instead so you can do development or test for errors.

    /**

    * Returns the name of a debug version of the JavaScript file provided by getScript(). The default implementation
    * invokes getScript().
    * @since 2.0.2
    */
    public String getDebugScript() {
    return getScript();
    }