public
Last active

RequireJS optimizer Ant task

  • Download Gist
build.xml
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
<?xml version="1.0" encoding="utf-8"?>
<project name="sample-require-js" default="" basedir=".">
<!-- properties -->
<property name="r.js" value="_build/rjs/r.js" />
<property name="closure.jar" value="_build/closure/compiler.jar" />
<property name="rhino.jar" value="_build/rhino/js.jar" />
<property name="js.build" value="_build/js.build.js" />
<property name="css.build" value="_build/css.build.js" />
<!-- custom tasks -->
<!-- targets -->
<target name="-optimize" description="Combine and minify files.">
<java classname="org.mozilla.javascript.tools.shell.Main">
<classpath>
<pathelement location="${rhino.jar}" />
<pathelement location="${closure.jar}" />
</classpath>
<arg value="${r.js}"/>
<arg value="-o"/>
<arg value="${requirejs.optimizer.settings}"/>
</java>
<echo message="optimized ${requirejs.optimizer.settings}" />
</target>
<target name="optimizeJS">
<echo message="Combining and minifying JS files." />
<antcall target="-optimize">
<param name="requirejs.optimizer.settings" value="${js.build}" />
</antcall>
</target>
<target name="optimizeCSS">
<echo message="Combining and compressing CSS files." />
<antcall target="-optimize">
<param name="requirejs.optimizer.settings" value="${css.build}" />
</antcall>
</target>
</project>
css.build.js
JavaScript
1 2 3 4 5
({
baseUrl: "../style",
optimizeCss : "standard",
dir: "../../../deploy/style"
})
js.build.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
({
baseUrl: "../scripts",
dir: "../../../deploy/scripts",
modules: [
{
name: "main",
include : [
"lib/my_awesome_shared_lib"
]
},
{
name : "sections/home/main",
exclude : [
"lib/my_awesome_shared_lib"
]
},
{
name : "sections/gallery/main",
exclude : [
"lib/my_awesome_shared_lib"
]
}
]
})

Example of an Ant task to run RequireJS optimizer with multiple optimization targets - in this case I have different build.js files for CSS and JS but could be one for whole project and another for just a small part of the app and/or specific modules.

To optimize just the files inside a specific folder you can set the baseDir inside the build.js files (config files used to optimize the whole project) - I avoid setting the appDir to the root folder since it would copy all the files into the deploy folder and I usually create more tasks to copy and change other things before deployment (and avoid copying some folders/files) so for me targeting only the scripts and style folders is a better approach in most cases.

I usually name folders/files that I don't want to copy to deploy starting with an underscore so I can easily ignore them. I usually put files related with the build process inside a folder named _build but you can change the paths to point wherever your files are.

Example of build task that I usually use to copy files to a deploy folder: https://gist.github.com/826481

For RequireJS 0.23.0, we need to do the following :

<property name="requirejs.build.dir" value="_build/requirejs/build" />
<property name="requirejs.bin.dir" value="_build/requirejs/bin" />
<target name="-optimize" description="Combine and minify files.">
    <java classname="org.mozilla.javascript.tools.shell.Main">
        <classpath>
            <pathelement location="${requirejs.build.dir}/lib/rhino/js.jar" />
            <pathelement location="${requirejs.build.dir}/lib/closure/compiler.jar" />
        </classpath>
        <arg value="${requirejs.bin.dir}/x.js" />
        <arg value="${requirejs.bin.dir}" />
        <arg value="${requirejs.build.dir}/build.js" />
        <arg value="${requirejs.optimizer.settings}" />
    </java>
</target>

updated example to work with 0.23+ thanks for the heads up @jlanglade

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.