Boilerplate Build mit FTP deploy

Da habe ich mir letztens die html5 boilerplate angeschaut und musste feststellen, dass die einen ziemlich guten build mitbringt.
Dieser optimiert Bilder, konkateniert und komprimiert alles was so geht, mit Hilfe von u.a. dem YUI Kompressor.
Was es noch nicht kann ist der Deploy, aber das kann man ihm ja beibringen ;)

Nun denn, direkt mal probieren, der Post hier beschreibt schon ziemlich gut was und wie man da was machen kann.

Ich benutze noch ant 1.8.0, also machen wir was uns vorgeschlagen wird:

All features of the build script require Ant version 1.8.2. Please upgrade to 1.8.2 or remove all instances of ‘overwrite=no’ (and this fail task) from the build script to continue

Also alle overwrite Attribute raus und den Test Task rausnehmen:
Den Testtask rausnehmen:

<fail message="All features of the build script require Ant version 1.8.2. Please upgrade to 1.8.2 or remove all instances of 'overwrite=no' (and this fail task) from the build script to continue">
<condition>
<not>
<contains string="${ant.version}" substring="1.8.2"/>
</not>
</condition>
</fail>

Dann probieren:

cd build
ant

Und funktioniert: in publish liegt jetzt das optimierte Web Projekt.

Danach noch die buffer folder leeren, ist nicht unbedingt nötig aber macht Spaß :)

ant clean

Um die Bilder Optimierung anzuschalten, muss ich noch die libs dafür nach installieren:

sudo apt-get install libjpeg-progs optipng

Kleiner Tip noch:
Nutzt man zusätzliche javascript libs, die nicht konkateniert werden sollen, sollte man die nicht zwischen die comments schreiben.
Diese hier:

<!-- scripts concatenated and minified via ant build script-->
<!-- end scripts-->

Und um es auf die Spitze zu treiben lassen wir mal den vollen minify laufen:

ant minify

Der komprimiert zusätzlich noch das Markup.

Aufräumen:

ant clean

Nun noch den publish folder uploaden:
Ich will ja FTP via ant benutzen also vorher die Abhängigkeiten davon installieren, siehe hier in einem alten Post von mir.
Außerdem muss man noch die FTP properties angeben, das passiert in config/project.properties:

#FTP deploy
tool.ftp.host = host
tool.ftp.user = user
tool.ftp.password = password
tool.ftp.remotedir = httpdocs

Holt man sich die boilerplate direkt von github, ist da eine Neuerung drin, welche erlaubt den Build zu erweitern, indem man eine project.xml anlegt und darin seine eigenen targets anlegen kann.
Benutzt man die letzte stable version muss man den task direkt in die build.xml schreiben.

Der FTP task ist ganz simpel ohne Spirenzien:

<target name="ftpupload" description="uploads the publish folder to your web space via ftp">
<ftp server="${tool.ftp.host}" userid="${tool.ftp.user}" password="${tool.ftp.password}" timediffauto="false" remotedir="${tool.ftp.remotedir}" action="send" verbose="yes" passive="yes" depends="yes">
<fileset dir="${dir.publish}">
</fileset>
</ftp>
</target>

Dann mal uploaden:

ant ftpupload

Komplett ist das dann so:

ant minify
ant ftpupload
ant clean

2 Replies to “Boilerplate Build mit FTP deploy”

  1. yeah, we’re working on it, but writing in english takes us some time :)
    but i tried to translate ivos post – here you go:

    I took a closer look at the html5 boilerplate lately.
    It optimizes Images, concats and compresses anything with a little help from the YUI compressor.
    What it doesn’t do yet is deploying stuff – but you can teach it ;)

    Well let’s try it.
    This post does decribe quite good what is possible

    I’m using ant 1.8.0, so let’s do as adviced:

    All features of the build script require Ant version 1.8.2. Please upgrade to 1.8.2 or remove all instances of ‘overwrite=no’ (and this fail task) from the build script to continue

    Remove all overwrit attributes and the test task:

    <fail message="All features of the build script require Ant version 1.8.2. Please upgrade to 1.8.2 or remove all instances of 'overwrite=no' (and this fail task) from the build script to continue">
    <condition>
    <not>
    <contains string="${ant.version}" substring="1.8.2"/>
    </not>
    </condition>
    </fail>
    

    then try:

    cd build
    ant
    

    It works! in “publish” you’ll find the optimized web project.

    Clear the buffer folder afterwards. Which is not necessary but is quite fun.

    ant clean

    To enable image optimization, one has to install the libs:

    sudo apt-get install libjpeg-progs optipng

    hint:

    if you’re using additional javascript libs, which you don’t want to be concated,
    don’t put them in between those comments:

    <!-- scripts concatenated and minified via ant build script-->
    <!-- end scripts-->
    

    To carry things to the extreme let’s run the full minify:

    ant minify

    It also compresses the markup

    clean up:

    ant clean

    Now i want to upload the publish folder:
    I wanna use FTP via ant, so install dependencies first.
    (see my post on how to do that)

    you’ll also have to add the FTP properties in config/project.properties:

    #FTP deploy
    tool.ftp.host = host
    tool.ftp.user = user
    tool.ftp.password = password
    tool.ftp.remotedir = httpdocs
    

    if you got the boilerplate dev version directly from github,
    you’ll have the possibility to create a project.xml file with your own targets in it.
    If you’re using the latest stable build you’ll have to put the task in the build.xml

    The FTP task itself is pretty simple:

    <target name="ftpupload" description="uploads the publish folder to your web space via ftp">
    <ftp server="${tool.ftp.host}" userid="${tool.ftp.user}" password="${tool.ftp.password}" timediffauto="false" remotedir="${tool.ftp.remotedir}" action="send" verbose="yes" passive="yes" depends="yes">
    <fileset dir="${dir.publish}">
    </fileset>
    </ftp>
    </target>
    

    and upload it:

    ant ftpupload

    so it’s those commands:

    ant minify
    ant ftpupload
    ant clean
    

Leave a Reply

Your email address will not be published. Required fields are marked *