<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>yui-compressor | Nerdpress.org</title>
	<atom:link href="https://nerdpress.org/tag/yui-compressor/feed/" rel="self" type="application/rss+xml" />
	<link>https://nerdpress.org</link>
	<description>...dev, tech problems and solutions.</description>
	<lastBuildDate>Tue, 13 Sep 2011 14:28:30 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Boilerplate Build mit FTP deploy</title>
		<link>https://nerdpress.org/2011/09/13/boilerplate-build-mit-ftp-deploy/</link>
					<comments>https://nerdpress.org/2011/09/13/boilerplate-build-mit-ftp-deploy/#comments</comments>
		
		<dc:creator><![CDATA[Ivo Bathke]]></dc:creator>
		<pubDate>Tue, 13 Sep 2011 09:12:02 +0000</pubDate>
				<category><![CDATA[Deployment]]></category>
		<category><![CDATA[Project Setup]]></category>
		<category><![CDATA[Ant]]></category>
		<category><![CDATA[boilerplate]]></category>
		<category><![CDATA[deploy]]></category>
		<category><![CDATA[yui-compressor]]></category>
		<guid isPermaLink="false">https://nerdpress.org/?p=1652</guid>

					<description><![CDATA[<p>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 &#8230; </p>
<p class="link-more"><a href="https://nerdpress.org/2011/09/13/boilerplate-build-mit-ftp-deploy/" class="more-link">Continue reading<span class="screen-reader-text"> "Boilerplate Build mit FTP deploy"</span></a></p>
The post <a href="https://nerdpress.org/2011/09/13/boilerplate-build-mit-ftp-deploy/">Boilerplate Build mit FTP deploy</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></description>
										<content:encoded><![CDATA[<p>Da habe ich mir letztens die <a href="http://html5boilerplate.com/">html5 boilerplate</a> angeschaut und musste feststellen, dass die einen ziemlich guten build mitbringt.<br />
Dieser optimiert Bilder, konkateniert und komprimiert alles was so geht, mit Hilfe von u.a. dem YUI Kompressor.<br />
Was es noch nicht kann ist der Deploy, aber das kann man ihm ja beibringen ;)</p>
<p><span id="more-1652"></span>Nun denn, direkt mal probieren, der Post <a href="http://net.tutsplus.com/tutorials/html-css-techniques/automated-optimization-with-html5-boilerplate-build/">hier</a> beschreibt schon ziemlich gut was und wie man da was machen kann.</p>
<p>Ich benutze noch ant 1.8.0, also machen wir was uns vorgeschlagen wird:</p>
<blockquote><p>All features of the build script require Ant version 1.8.2. Please upgrade to 1.8.2 or remove all instances of &#8216;overwrite=no&#8217; (and this fail task) from the build script to continue</p></blockquote>
<p>Also alle overwrite Attribute raus und den Test Task rausnehmen:<br />
Den Testtask rausnehmen:</p>
<pre class="brush: xml; title: ; notranslate">
 &lt;fail message=&quot;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&quot;&gt;
        &lt;condition&gt;
            &lt;not&gt;
                &lt;contains string=&quot;${ant.version}&quot; substring=&quot;1.8.2&quot;/&gt;
            &lt;/not&gt;
        &lt;/condition&gt;
 &lt;/fail&gt;
</pre>
<p>Dann probieren:</p>
<pre class="brush: bash; title: ; notranslate">
cd build
ant
</pre>
<p>Und funktioniert: in publish liegt jetzt das optimierte Web Projekt.</p>
<p>Danach noch die buffer folder leeren, ist nicht unbedingt nötig aber macht Spaß :)</p>
<pre class="brush: bash; title: ; notranslate">ant clean</pre>
<p>Um die Bilder Optimierung anzuschalten, muss ich noch die libs dafür nach installieren:</p>
<pre class="brush: bash; title: ; notranslate">sudo apt-get install libjpeg-progs optipng</pre>
<p>Kleiner Tip noch:<br />
Nutzt man zusätzliche javascript libs, die nicht konkateniert werden sollen, sollte man die nicht zwischen die comments schreiben.<br />
Diese hier:</p>
<pre class="brush: xml; title: ; notranslate">
 &lt;!-- scripts concatenated and minified via ant build script--&gt;
 &lt;!-- end scripts--&gt;
</pre>
<p>Und um es auf die Spitze zu treiben lassen wir mal den vollen minify laufen:</p>
<pre class="brush: bash; title: ; notranslate">ant minify</pre>
<p>Der komprimiert zusätzlich noch das Markup.</p>
<p>Aufräumen:</p>
<pre class="brush: bash; title: ; notranslate">ant clean</pre>
<p>Nun noch den publish folder uploaden:<br />
Ich will ja FTP via ant benutzen also vorher die Abhängigkeiten davon installieren, siehe hier in einem alten <a href="https://nerdpress.org/2011/07/29/install-ant-ftp-task-on-ubuntu/">Post</a> von mir.<br />
Außerdem muss man noch die FTP properties angeben, das passiert in config/project.properties:</p>
<pre class="brush: bash; title: ; notranslate">
 #FTP deploy
 tool.ftp.host = host
 tool.ftp.user = user
 tool.ftp.password = password
 tool.ftp.remotedir = httpdocs
</pre>
<p>Holt man sich die boilerplate direkt von <a href="https://github.com/paulirish/html5-boilerplate">github</a>, ist da eine Neuerung drin, welche erlaubt den Build zu erweitern, indem man eine project.xml anlegt und darin seine eigenen targets anlegen kann.<br />
Benutzt man die letzte stable version muss man den task direkt in die build.xml schreiben.</p>
<p>Der FTP task ist ganz simpel ohne Spirenzien:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;target name=&quot;ftpupload&quot; description=&quot;uploads the publish folder to your web space via ftp&quot;&gt;
	&lt;ftp server=&quot;${tool.ftp.host}&quot; userid=&quot;${tool.ftp.user}&quot; password=&quot;${tool.ftp.password}&quot; timediffauto=&quot;false&quot; remotedir=&quot;${tool.ftp.remotedir}&quot; action=&quot;send&quot; verbose=&quot;yes&quot; passive=&quot;yes&quot; depends=&quot;yes&quot;&gt;
            &lt;fileset dir=&quot;${dir.publish}&quot;&gt;
            &lt;/fileset&gt;
        &lt;/ftp&gt;
&lt;/target&gt;
</pre>
<p>Dann mal uploaden:</p>
<pre class="brush: bash; title: ; notranslate">ant ftpupload</pre>
<p>Komplett ist das dann so:</p>
<pre class="brush: bash; title: ; notranslate">
 ant minify
 ant ftpupload
 ant clean
</pre>The post <a href="https://nerdpress.org/2011/09/13/boilerplate-build-mit-ftp-deploy/">Boilerplate Build mit FTP deploy</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></content:encoded>
					
					<wfw:commentRss>https://nerdpress.org/2011/09/13/boilerplate-build-mit-ftp-deploy/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>[Symfony 2] AsseticBundle, Less CSS &#038; YUI Compressor unter OSX installieren</title>
		<link>https://nerdpress.org/2011/08/25/symfony-2-asseticbundle-less-css-yui-compressor-unter-osx-installieren/</link>
					<comments>https://nerdpress.org/2011/08/25/symfony-2-asseticbundle-less-css-yui-compressor-unter-osx-installieren/#comments</comments>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Thu, 25 Aug 2011 16:55:02 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[node.js]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Symfony]]></category>
		<category><![CDATA[Assetic]]></category>
		<category><![CDATA[filter]]></category>
		<category><![CDATA[less]]></category>
		<category><![CDATA[symfony 2]]></category>
		<category><![CDATA[Twig]]></category>
		<category><![CDATA[yui-compressor]]></category>
		<guid isPermaLink="false">https://nerdpress.org/?p=1600</guid>

					<description><![CDATA[<p>Less CSS und YUI-Compressor mit Assetic unter OSX installieren und innerhalb Symfony 2 konfigurieren.</p>
The post <a href="https://nerdpress.org/2011/08/25/symfony-2-asseticbundle-less-css-yui-compressor-unter-osx-installieren/">[Symfony 2] AsseticBundle, Less CSS & YUI Compressor unter OSX installieren</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></description>
										<content:encoded><![CDATA[<p>Das AsseticBundle ist ein Wrapper um <a href="https://github.com/kriswallsmith/assetic">Assetic</a>, ein geniales Tool, um statische Assets für Webprojekte zu verwalten. AsseticBundle ist extrem einfach zu verwenden, einfach die entsprechende Filter-Chain via yaml konfigurieren, um mehr muss man sich nicht kümmern. Natürlich allerdings müssen die zugrundeliegenden Abhängigkeiten im Vorfeld installiert sein. In unserem Falle benötigen wir den <a href="http://developer.yahoo.com/yui/compressor/">Yui-Compressor</a> als jar-File und <a href="http://lesscss.org/">Less CSS</a>. Less ist ein <a href="http://nodejs.org/">node.js</a> Modul, was bedingt, dass wir zuvor node.js installieren müssen.<br />
<span id="more-1600"></span></p>
<p>Also node.js via macports holen:</p>
<pre class="brush: bash; title: ; notranslate">
$ sudo port install nodejs
</pre>
<p>Und den node.js-eigenen Package-Manager:</p>
<pre class="brush: bash; title: ; notranslate">
$ sudo port install npm
</pre>
<p>Mit diesem installieren wir als nächsts less, und zwar &#8220;global&#8221; (via -g)-Flag (&#8220;global&#8221; bedeutet, dass das Modul unter $nodejs_lib_path/../node_modules abgelegt wird, ansonsten wird es im aktuellen Arbeitsverzeichnis unter ./node_modules installiert):</p>
<pre class="brush: bash; title: ; notranslate">
$ sudo npm install -g less
</pre>
<p>Damit haben wir alles, um unsere less CSS Stylesheets kompilieren zu können.</p>
<p>Als nächstes holen wir uns den Yui-Kompressor, diesen habe ich mir einfach aus dem Netz gezogen und unter app/java/yuicompressor-2.4.6.jar abgelegt (Die Binary findet ihr unter <a href="http://developer.yahoo.com/yui/compressor/">http://developer.yahoo.com/yui/compressor/</a>).</p>
<p>Nun die Konfiguration:</p>
<p>app/config.yml:</p>
<pre class="brush: python; title: ; notranslate">
# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        less:
          node: /opt/local/bin/node
          node_paths: &#x5B;/opt/local/lib/node, /opt/local/lib/node_modules]
        yui_css:
          jar: %kernel.root_dir%/java/yuicompressor-2.4.6.jar
</pre>
<p>Zu beachten sind die &#8220;node_paths&#8221;. Der node.js-Modulpfad muss explizit angegeben werden, sonst kann node.js die require()-Statements nicht auflösen (das sind sozusagen die node.js-&#8220;Classpaths&#8221;). /opt/local/lib/node zeigt auf Core-Module, in /opt/local/lib/node_modules liegt unser less.</p>
<p>Um den Yui-Kompressor zu aktivieren, reicht der simple Pfad zur .jar-Datei.</p>
<p>Nun müssen wir nur noch unser Twig-Layout anpassen:</p>
<p>src/Nerdpress/DemoBundle/Resources/views/layout.html.twig:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        {% stylesheets
                '@NerdpressDemoBundle/Resources/public/css/main.css'
                '@NerdpressDemoBundle/Resources/public/css/layout.css'
        	filter='less,?yui_css'
                combine=true
        %}
          &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ asset_url }}&quot; type=&quot;text/css&quot; media=&quot;all&quot; /&gt;
        {% endstylesheets %}
</pre>
<p>Das &#8220;?&#8221; vor dem Filter &#8220;yui_css&#8221; bedingt, dass die CSS-Compression nur angeschaltet wird, wenn der Debug-Parameter auf false steht. &#8220;Combine&#8221; bedeutet, dass alle CSS-Dateien in einer einzigen, großen Datei zusammengefügt werden, und &#8220;less&#8221; bedeutet letztlich, dass alle CSS-Dateien mittels less CSS precompiled werden.</p>
<p>That´s it. Die Seite im Browser öffnen und das Ergebnis bewundern. Viel Spaß! Symfony ist schon was feines&#8230;</p>The post <a href="https://nerdpress.org/2011/08/25/symfony-2-asseticbundle-less-css-yui-compressor-unter-osx-installieren/">[Symfony 2] AsseticBundle, Less CSS & YUI Compressor unter OSX installieren</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></content:encoded>
					
					<wfw:commentRss>https://nerdpress.org/2011/08/25/symfony-2-asseticbundle-less-css-yui-compressor-unter-osx-installieren/feed/</wfw:commentRss>
			<slash:comments>5</slash:comments>
		
		
			</item>
	</channel>
</rss>
