JavaScript compression tool

Alex - what tool do you use to stitch together and compress your javascript source files into its runtime format?

It's some in-house grown utility which Alex was not willing to share (when asked last time).

I had a java class doing same, but it fails if you do not write correct JS. I will release it in public domain very shortly...

Another thought - if you enable gzip compression, it makes code lot smaller and manageable. No need to make it cryptic and maintenance nightmare for yourself.

Just use some simple script which joins all fragments in required sequence and filters copyright message except first one. This also helps in debugging also when you get JavaScript error with only line number.

PS: you can find correct sequence form lib/source/grid.js or lib/source/aw.js (follow similar logic for CSS).

Cheers,

Kwooda,

I have a simple script which reads content of /lib/source/aw.js and then combines all files listed there into the single one removing white spaces and line breaks. Nothing complicated but you have to maintain the correct syntax in your js files.

This works satisfactorily for me. Bang your head if you don't know how to use apache-ant <img src="http://ant.apache.org/images/project-logo.gif" /> Sorry :-(

<project name="ActiveWidgets" default="generate-runtime" basedir=".">

<description>
ActiveWidgets runtime build file.
</description>

<!-- set global properties for this build -->
<property name="source" location="source" />
<property name="runtime" location="runtime" />

<target name="init">
<!-- Create the time stamp -->
<tstamp />
<mkdir dir="${runtime}" />
</target>

<target name="clean">
<delete dir="${runtime}" />
</target>

<target name="generate-runtime" depends="generate-lib,generate-styles">
</target>

<target name="generate-lib" depends="init">
<concat destfile="${runtime}/lib/aw.js" fixlastline="true">
<filelist refid="files.js" />
</concat>
</target>

<target name="generate-styles" depends="init">

<concat destfile="${runtime}/styles/aqua/aw.css" fixlastline="true">
<filelist refid="files.css.aqua" />
</concat>
<copy todir="${runtime}/styles/aqua">
<fileset dir="${source}/styles/aqua" excludes="**/*.css" />
</copy>

<concat destfile="${runtime}/styles/classic/aw.css" fixlastline="true">
<filelist refid="files.css.classic" />
</concat>
<copy todir="${runtime}/styles/classic">
<fileset dir="${source}/styles/classic" excludes="**/*.css" />
</copy>

<concat destfile="${runtime}/styles/mono/aw.css" fixlastline="true">
<filelist refid="files.css.mono" />
</concat>
<copy todir="${runtime}/styles/mono">
<fileset dir="${source}/styles/mono" excludes="**/*.css" />
</copy>

<concat destfile="${runtime}/styles/xp/aw.css" fixlastline="true">
<filelist refid="files.css.xp" />
</concat>
<copy todir="${runtime}/styles/xp">
<fileset dir="${source}/styles/xp" excludes="**/*.css" />
</copy>

</target>

<!-- fileset definitions here -->

<filelist id="files.js" dir="${source}/lib">

<file name="namespaces/aw.js" />

<file name="browsers/common.js" />
<file name="browsers/detect.js" />
<file name="browsers/ie.js" />
<file name="browsers/gecko.js" />
<file name="browsers/safari.js" />
<file name="browsers/opera.js" />

<file name="system/object.js" />
<file name="system/model.js" />
<file name="system/format.js" />
<file name="system/html.js" />
<file name="system/template.js" />
<file name="system/control.js" />

<file name="formats/string.js" />
<file name="formats/number.js" />
<file name="formats/date.js" />
<file name="formats/html.js" />

<file name="html/tags.js" />

<file name="templates/imagetext.js" />
<file name="templates/image.js" />
<file name="templates/text.js" />
<file name="templates/link.js" />
<file name="templates/checkbox.js" />
<file name="templates/checkeditem.js" />
<file name="templates/radio.js" />
<file name="templates/popup.js" />
<file name="templates/frame.js" />
<file name="templates/list.js" />
<file name="templates/input.js" />
<file name="templates/combo.js" />
<file name="templates/cell.js" />

<file name="scroll/bars.js" />

<file name="panels/horizontal.js" />
<file name="panels/vertical.js" />
<file name="panels/grid.js" />

<file name="ui/_list.js" />
<file name="ui/_actions.js" />
<file name="ui/_changes.js" />
<file name="ui/_state.js" />
<file name="ui/_single.js" />
<file name="ui/_multi.js" />
<file name="ui/_checked.js" />

<file name="ui/imagetext.js" />
<file name="ui/label.js" />
<file name="ui/group.js" />
<file name="ui/button.js" />
<file name="ui/link.js" />
<file name="ui/input.js" />
<file name="ui/list.js" />
<file name="ui/tabs.js" />
<file name="ui/combo.js" />
<file name="ui/checkbox.js" />
<file name="ui/checkedlist.js" />
<file name="ui/radio.js" />

<file name="grid/_actions.js" />
<file name="grid/_size.js" />
<file name="grid/_cell.js" />
<file name="grid/_row.js" />
<file name="grid/_view.js" />
<file name="grid/_navigation.js" />
<file name="grid/_sort.js" />
<file name="grid/_overflow.js" />
<file name="grid/_scroll.js" />
<file name="grid/_width.js" />
<file name="grid/_virtual.js" />
<file name="grid/_grid.js" />
<file name="grid/_extended.js" />

<file name="grid/_singlecell.js" />
<file name="grid/_singlerow.js" />
<file name="grid/_multirow.js" />
<file name="grid/_multirowmarker.js" />

<file name="grid/separator.js" />
<file name="grid/header.js" />
<file name="grid/row.js" />
<file name="grid/rows.js" />
<file name="grid/control.js" />
<file name="grid/extended.js" />

<file name="tree/item.js" />
<file name="tree/view.js" />
<file name="tree/group.js" />
<file name="tree/control.js" />

<file name="http/request.js" />
<file name="csv/table.js" />
<file name="xml/table.js" />

</filelist>

<filelist id="files.css.aqua" dir="${source}/styles">
<file name="common/system.css" />
<file name="common/item.css" />
<file name="common/text.css" />
<file name="aqua/group.css" />
<file name="common/link.css" />
<file name="common/button.css" />
<file name="aqua/button.css" />
<file name="common/checkbox.css" />
<file name="aqua/checkbox.css" />
<file name="common/input.css" />
<file name="aqua/input.css" />
<file name="common/list.css" />
<file name="aqua/list.css" />
<file name="aqua/radio.css" />
<file name="common/tabs.css" />
<file name="aqua/tabs.css" />
<file name="common/combo.css" />
<file name="aqua/combo.css" />
<file name="common/scroll.css" />
<file name="common/panels.css" />
<file name="common/grid.css" />
<file name="aqua/grid.css" />
<file name="common/tree.css" />
<file name="aqua/tree.css" />
<file name="aqua/images.css" />
<file name="aqua/scrollbars.css" />
</filelist>

<filelist id="files.css.classic" dir="${source}/styles">
<file name="common/system.css" />
<file name="common/item.css" />
<file name="common/text.css" />
<file name="classic/group.css" />
<file name="common/link.css" />
<file name="common/button.css" />
<file name="classic/button.css" />
<file name="common/checkbox.css" />
<file name="classic/checkbox.css" />
<file name="common/input.css" />
<file name="classic/input.css" />
<file name="common/list.css" />
<file name="classic/list.css" />
<file name="classic/radio.css" />
<file name="common/tabs.css" />
<file name="classic/tabs.css" />
<file name="common/combo.css" />
<file name="classic/combo.css" />
<file name="common/scroll.css" />
<file name="common/panels.css" />
<file name="common/grid.css" />
<file name="classic/grid.css" />
<file name="common/tree.css" />
<file name="classic/tree.css" />
<file name="classic/images.css" />
<file name="classic/scrollbars.css" />
</filelist>

<filelist id="files.css.mono" dir="${source}/styles">
<file name="common/system.css" />
<file name="common/item.css" />
<file name="common/text.css" />
<file name="mono/group.css" />
<file name="common/link.css" />
<file name="common/button.css" />
<file name="mono/button.css" />
<file name="common/checkbox.css" />
<file name="mono/checkbox.css" />
<file name="common/input.css" />
<file name="mono/input.css" />
<file name="common/list.css" />
<file name="mono/list.css" />
<file name="mono/radio.css" />
<file name="common/tabs.css" />
<file name="mono/tabs.css" />
<file name="common/combo.css" />
<file name="mono/combo.css" />
<file name="common/scroll.css" />
<file name="common/panels.css" />
<file name="common/grid.css" />
<file name="mono/grid.css" />
<file name="common/tree.css" />
<file name="mono/tree.css" />
<file name="mono/images.css" />
<file name="mono/scrollbars.css" />
</filelist>

<filelist id="files.css.xp" dir="${source}/styles">
<file name="common/system.css" />
<file name="common/item.css" />
<file name="common/text.css" />
<file name="xp/group.css" />
<file name="common/link.css" />
<file name="common/button.css" />
<file name="xp/button.css" />
<file name="common/checkbox.css" />
<file name="xp/checkbox.css" />
<file name="common/input.css" />
<file name="xp/input.css" />
<file name="common/list.css" />
<file name="xp/list.css" />
<file name="xp/radio.css" />
<file name="common/tabs.css" />
<file name="xp/tabs.css" />
<file name="common/combo.css" />
<file name="xp/combo.css" />
<file name="common/scroll.css" />
<file name="common/panels.css" />
<file name="common/grid.css" />
<file name="xp/grid.css" />
<file name="common/tree.css" />
<file name="xp/tree.css" />
<file name="xp/images.css" />
<file name="xp/scrollbars.css" />
</filelist>

</project>