How to Use the Nettuts+ Phing Build Script
videos

How to Use the Nettuts+ Phing Build Script

on Aug 19th 2011 with 15 comments
Tutorial Details
Download Source Files

We’ve created a build script for Phing that will give designers the ability to automatically compress, concatenate, and Prefixize all of their stylesheets and scripts — simply by typing five characters. I’ll show you how to use it in this quick tip video.

Choose 720p for optimal viewing.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Coming Soon

  • Optimize all images
  • Clean up and remove unnecessary element attributes

That’s It

As you can see from the video above, it’s incredibly easy to use the Nettuts+ build script. Just install Phing, download the build directory, and run phing from the command line! Even better, if you’re a PHP developer, you can extend Phing quite easily. Be sure to refer to our Premium course if that intrigues you.

If you notice any bugs, let me know in the comments, and I’ll get those fixed ASAP!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://blog.freevar.com hang2303

    pertamaxxxxxxxxxxxxxxxxxx

    good tutorial for newbie ;)

  • http://www.pawelmartuszewski.co.uk Pawel

    Nice one!!! I’ll definitely give it a try!

  • http://saifbechan.com Saif

    Nice work. It’s always hard to decide weather to keep organized and split your files, or optimize for pageloads. This way you can have both.

    I heard that some of the build script that are available on the net do not work well with the @font-face property, and break the script for certain browsers. I hope this one does a good job.

    Prefixize looks interesting also as I am slowly moving towards full css3 and html5.

    Will give both a try in my new project, thanks for the great work!

  • Hong Duc

    How do you use Phing in Windows OS ? I installed the Phing with the pear instruction and everything seem to work fine. But I can’t get it to work when I type like this in the cmd:

    C:\xampp\php>phing.bat c:\xampp\htdocs\demo_technique\nettuts\buid\build.xml
    Buildfile: build.xml does not exist!

    What should I do to make it work ?

    Thanks

    • ethan

      Download cygwin , it’s a tool for windows that lets you run linux commands in windows environment.

      With cygwin you’ll be able to implement this tutorial in windows.

  • http://nanke.zhwjyy.com 珠海男科医院

    路过踩一踩，表示我来过
    支持你的博客http://net.tutsplus.com/
    也谢谢您的回访http://nanke.zhwjyy.com/?wyo6uk6q

  • Florian

    This is pretty awesome!
    I’m definitifly going to use this in my next project.

  • http://www.karlmacklin.com Karl Macklin

    Jeffrey, have you forgotten to change batteries in your smoke detector?

  • Simon

    To make the prefixr work in windows bash, please change the line to:

    <exec command=’curl -sSd css=”${css.min}” http://prefixr.com/api/index.php > ${build.cssPath}/${css.concat.min}’ />

    (change double quotes to single and the other way round)

    remove the doubble “${js.concat.min}” here:

    <regexp pattern=”<!–\s*js\s*–>[\s\S]+?<!–\s*end js\s*–>” replace=”<script src=’./${base.js.path}/${js.concat.min}’></script>” />

    i also had to change this line in the php block to:

    $file = file_get_contents(“$file”);

    to make it work, otherwise the file from the folder ../../index.html was read.

  • setmax

    very nice

  • http://nathangiesbrecht.com Winnipeg Web Designer

    Very nice script. This will come in quite handy. I’ll definitely be using this on my next project!

  • Andy

    Looks awesome!
    How did you get that opacity on the terminal? looks cool! ;-)

  • http://maxwellbarvian.com Maxwell Barvian

    Cool stuff; props for sharing. Unfortunately I wish there were less of these on the Internet. Minifying/compressing (especially with Google’s Closure Compiler) css/js files makes them unreadable, which doesn’t really align with the whole “open web” philosophy.

  • Matanya

    Hey, Great tool, thanks! For some reason when I run it the concatenated files (css.min.css etc.) are empty. Any ideas? TIA

  • Matanya

    Great build tool, thanks!

    I think I might have found a little bug, though. When I ran phing I got an error message from the assets.getPath method. After digging in for a while it turned out that the file_get_contents function on line 135, got a non-existent and illegal path. It’s parameter is currently set to “${base.dir}/$file”. I’ve changed it to $file and It worked.