permalink

40

Setting Up A Build Process For JavaScript & CSS Files Using Ant (Screencast)

 

A well defined build process ensures that the output of your project is built in a consistent manner every time a new build is run. Today we’re going to take a look at how you can setup your own Ant-powered build process using for client-side files (such as JavaScript and CSS).

You’ll learn how to automate the validation of your scripts using JSLint (or JSHint), concatenate your files using sets of specific rules and finally minify both sets of your output for production use. You’ll also learn some additional tips and tricks that can assist you in build file configuration along the way. I hope this screencast comes in useful.

Tools Required

The following are the tools you’ll need for today’s tutorial. Make sure you follow the Ant installation guide in case additional steps are required. OSX users may find this guide also useful.

The Screencast

Details: 720p resolution, 21:27m duration. Full-screen mode recommended

 

 

 

 

What If I Don’t Have Time To Watch?

I understand that some of my readers don’t have as much time to watch complete screencasts as others do. If you would like to learn how to setup a build process without watching the video, I recommend first installing all of the tools to your local system, then reading through the build.xml file I’ve put up on GitHub to learn about build file structure. You may need to spend a little additional time researching what particular attributes or tags do, but it will give you a foundation you can build on.

Screencast Notes

The purpose of this screencast is to introduce readers without a great deal of experience in setting up Ant builds with a primer in this area. So as to keep this screencast as widely applicable as possible, I’ve kept it server-side language and testing framework agnostic.

Once you understand the basics of setting up an Ant build, integrating additional steps for tasks like unit testing or switching out YUI Compressor for the closure library (or others) become significantly more trivial.I would like for more advanced users to bare this in mind when reviewing the structure of this video.

Erreta: Although the screencast mentions a client-side build process, what I mean to refer to is a build process which is used to validate and minify etc client-side type files (JS/CSS). Please bare in mind that this is a regular Ant build process and not one powered by JavaScript alone.

References/Further Reading

  • HTML5Boilerplate’s build script is a great example of an expanded Ant build.xml file. You may also find their use of jpegtran and optipng (for image optimization) in the build of interest.
  • Mark Kolich has a useful post up about integrating Ant with Google’s Closure compiler if you would rather dive right into setting that up for your build process.
  • If looking for a very simplified build script that just focuses on minification, L Corner‘s build sample may be worth looking at as well.
  • I personally like SyntaxHighlighter’s build file which also demonstrates variable replacement and license file appending to your files in case you need to re-enforce your licensing conditions

Conclusions

And that’s it!. Thanks once again to Aki Karkkainen for being the inspiration behind me recording this screencast. I know a few beginners have found his Ant file templates useful and hopefully this video will further encourage front-end devs to try out both Ant and the other tools listed in today’s post. Build processes aren’t as scary as they can sometimes appear ; )

If you found the screencast useful, please feel free to share it with your friends or colleagues by clicking the retweet or like buttons below.

40 Comments

  1. Great article, I will try it for my JS projects. Can you tell me what software you use for the screencast and if you tried it on a computer with 2 or 3 monitors (I tried for windows different software and I had a lot of problems)?

    • I use a mac program called iShowU HD for my screencasts. For Windows I know a lot of colleagues make due with a combination of a Skype video window and something like Camtasia. Hope that helps!

  2. Joining Igor's questions –
    We are using TFS 2010 for our Builds,
    Is there any automated way to make adjust with this tool ?

  3. Thank for this post Andy! Very cool and it makes me very Interessted in building a make process for my applications. But One thing is very confusing for me you talk and wrote about "client side" but everything I saw was how you build these on your local maschine, I know you can do this also on your server on deployment. But on my understanding a "clientside" is more on the client. Like JavaScript is a clientside langauge, cuz its parsed and executed by the client. On the opposite PHP or Java are Serverside languages. So what do I got wrong?!

    • Hey CodeStar. You raise an interesting point. When I was initially creating the talk I meant to focus on build processes for client-side files (rather than a client-side powered build process) but only realized the confusion that might be experienced with the title once the talk had been recorded. I corrected this in the title of the post but I do apologize if you were a little uncertain of whether this was client-side powered or not. It is in fact just a regular Ant build process.

  4. Pingback: Follia Digitale » Setting Up A Build Process For JavaScript & CSS Files (Screencast)

  5. Addy have you looked into using Ruby’s Rake or Thor as a replacement for Ant? You could build your project without having to maintain your build logic in an XML document.

  6. Addy, thanks for the screencast its very helpful. In the past, Ive only used Ant as part of an automatd built process, built into the IDE e.g Netbeans. Ive had issues trying 2 work around it but just ended up building my projects manually. Thank You.

  7. Thanks for the credits, Addy ;)

    Nice additions; good to see more posts about frontend optimization as performance is becoming more and more important in web development. I'm currently tweaking my original template (http://www.akikoo.org/log/2010/04/11/building-frontend-code-with-ant/) to include more tools, such as a new target for FTP.

    Like you mentioned, the HTML5 Boilerplate build file (https://github.com/paulirish/html5-boilerplate/blob/master/build/build.xml) is a very good reference too.

    With these scripts, together with Steve Souder's great advice (http://stevesouders.com/) we should be pretty well prepared to deliver fast websites :)

  8. Addy, good intro on build scripts. What's missing is the initial setup of the web application to be able to use the newly concatenated scripts instead of the multiple scripts used in development. There are a number of ways that can be done, but without this the tutorial seems to be lacking context.

    Do you use a script loaded to handle this for you, or do you instead have your server-side application switch the includes at runtime based on environment variables?

    I used to use script loaders (used requires.js – great), but found its build process didn't very much mesh with my development process. Instead I wrote a small multithreaded script, css and html compilation tool that compiles scripts as they are saved during a development session. This way you're always working with the same code as you'll see in production, thereby reducing build issues introduced by minification or concatenation (back in the day, missing semi-colons, errant comments used to cause some problems).

    Anyway, curious how you handle the switch from multiple js/css files during development to a single file in production.

    • To switch from multiple JS/CSS to a single file you can use the same approach that HTML5 boilerplate uses, add comments around the code that will be concatenated and replace it with the "unified" script tag: https://github.com/paulirish/html5-boilerplate/bl

      Lately I've been using RequireJS for most of my projects so I only have 1 script tag even during development, so no need to replace it. If you want to run RequireJS optimizer using Ant use this as a reference: https://gist.github.com/825117

    • Hey Anatoly. I'd definitely recommend taking a look at the resources @millermedeiros posted earlier with respect to this. I purposefully didn't cover the unification step as I felt there was already quite a bit of material that those new to build processes might have to absorb, but you make a very valid point. If I have time I'll consider creating another screencast or post that covers any of the missing steps to achieve a good end to end build process.

  9. Addy,

    I have a question. I have been working on jQuery templates in HTML5 for a while now. It's often pain to include template strings in the JavaScript files while development. My previous colleague used sprocket in order to inject the templates into the JS files while build process.

    Now, is there any easy solution to this task within Ant build process?

    Thank you,

  10. really great stuff!
    I was thinking about setting up something similar to have one way of building JS apps and this actually drops light on the problem ;)

    ps. I think everobody should have time to watch your screencasts, worth every minute "wasted" ;)

  11. Addy, its an awesome post. I tried the same in my local box to find any JS error using JSLint. How do you view the output of the JSLint error using the ant traget?

  12. A great tutorial. I have only one question. Many of the JS files might depend on each other, and it important to concatenate them in a specific order, instead of simply arbitrarily.

    How do I do it with ant (if possible)? One possible way would be to manually annotate every JS file with a number of //import or //require statements, and parse them. This, however seems too tedious to do manually.

    Any other suggestions?

    • From the H5BP wiki:

      If you want to concatenate several JavaScript files and the order is important then you can replace the wildcard based concat with specific file names. It’s more work, but hopefully you won’t have to tweak this too often.

      For example, a JavaScript task may go from:


      <target name="-js.main.concat" depends="-load-build-info" description="(PRIVATE) Concatenates the JS files in dir.js">
      <echo message="Concatenating Main JS scripts..."/>
      <concat destfile="./${dir.publish}/${dir.js}/scripts-${build.number}.js">
      <fileset dir="./${dir.publish}/">
      <include name="**/${dir.js.main}/*.min.js"/>
      <exclude name="**/${dir.js.mylibs}/*.js"/>
      <exclude name="**/${dir.js.libs}/*.js"/>
      </fileset>
      </concat>
      </target>

      to this:

      <!-- JAVASCRIPT -->
      <target name="-js.main.concat" depends="-load-build-info" description="(PRIVATE) Concatenates the JS files in dir.js">
      <echo message="Concatenating JS scripts..."/>
      <concat destfile="./${dir.publish}/${dir.js}/scripts-${build.number}.js">
      <!--Add one entry for every file-->
      <fileset file="./${dir.publish}/${dir.js}/plugins.js" />
      <fileset file="./${dir.publish}/${dir.js}/script.js" />
      </concat>
      </target> Main

  13. Great post! Thanks!

    One question, let’s say once all the js files has been merged and minified, let’s call it all-js.min-23489734.js then how do you replace existing individual js file name within the source by the new merged js file name?

  14. Thank you very much for these useful explanations!
    Nevertheless, Maven is more and more used in enterprise, instead of Ant.
    Could you provide a Maven version of this build process? It would be great!

    Thanks again Addy for all your great articles!

  15. I haven’t seen the broadcast yet, I’m going to, but a few questions:
    - Why Rhino?
    - I want to do this in Eclipse (juno), can that be achieved?

  16. Pingback: WebWorks Ant Build Script | BlackBerry and Phone Shop

  17. Pingback: WebWorks Ant Build Script | SDK News

  18. Pingback: Devs: WebWorks Includes Ant Build Scripts! | NerdBerry.net

  19. Pingback: Concatenate and Optimize Your JavaScript & CSS | Dave NelsonDave Nelson

Leave a Reply

Required fields are marked *.