Silex, Twig und HTML5 BoilerPlate

Alright, there is a bundle for H5BP for symfony2 and there is Assetic, you can probably use both with Silex and thats just fine.
But in case you want to keep your Silex project lean (since its micro) you can use Twig and H5BP only and build / deploy your app from the outside.

With a little tuning of the H5BP build, of course / unfortunatly. (Ok thats the caveat)

So i have a structure like so:
web/
(this is the webroot, here is js/css/images, all that asset stuff and the index, here we use the recommended H5BP stuff’n’structure)
views/
(this is outside of webroot and here are all of the *.twig)

Then we need the boilerplate build stuff:

cd <silex>
cp -R <boilerplate>/build <silex>/build
mkdir intermediate
chmod 777 intermediate
mkdir publish
chmod 777 publish

Now we configure the build in the build/config/project.properties

#add your neccessary twig files that contain css and layout includes:
file.pages = views/layout.twig,views/search.twig

#exclude some already optimized libs
file.js.bypass = libs/jquery.isotope.min.js, libs/jquery.hoverIntent.minified.js

#change the source dir to web
dir.source = ./web

Since the build isnt able to handle multiple source dirs we have to copy the views manually to the intermediate and publish file.
So we need a new target:

<!--
*************************************************
* CUSTOM TARGETS                                  *
*************************************************
-->
<target name="copyViews">
<echo message="copy Views for build"/>
<mkdir dir="${dir.intermediate}/${dir.views}"/>
<copy todir="${dir.intermediate}/${dir.views}" includeEmptyDirs="true">
<fileset dir="${dir.views}/" excludes="${file.default.exclude}, ${file.exclude}">
</fileset>
</copy>
<mkdir dir="${dir.publish}/${dir.views}"/>
<copy todir="${dir.publish}/${dir.views}" includeEmptyDirs="true">
<fileset dir="${dir.views}/" excludes="${file.default.exclude}, ${file.exclude}">
</fileset>
</copy>
</target>

Gist
Copy this to build.xml or to your project.xml ( > H5BP 2).

Its nearly done! But one thing still needs to be customized if you run H5BP 2, so preplace the following with code with the code from the latest build.xml:

<replaceregexp match="&lt;!-- CSS concatenated [\d\w\s\W]*?!-- end CSS--&gt;" replace="&lt;link rel='stylesheet' href='${style.css}'&gt;" flags="m">
<fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replaceregexp>

with this:

<replaceregexp match="&lt;link rel=['&quot;]?stylesheet['&quot;]?\s+href=['&quot;]?(.*)/${file.root.stylesheet}(?:\?.*)?['&quot;]?\s*&gt;" 
replace="&lt;link rel='stylesheet' href='\1/${css.sha}.css'&gt;" flags="m">
<fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replaceregexp>

and

<replaceregexp match="&lt;!-- scripts concatenated [\d\w\s\W]*?!-- end ((scripts)|(concatenated and minified scripts))--&gt;" replace="&lt;script defer src='${scripts.js}\'&gt;&lt;/script&gt;" flags="m">
<fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replaceregexp>

with this:

<replaceregexp match="&lt;!-- scripts concatenated [\d\w\s\W]*&lt;script.*src=['&quot;]?(.*)/${file.root.script}(?:\?.*)?['&quot;]?\s*&gt;\s*&lt;/script&gt;[\d\w\s\W]*&lt;!-- end ((scripts)|(concatenated and minified scripts))\s*--&gt;" 
replace="&lt;script defer src='\1/${scripts.sha}.js\'&gt;&lt;/script&gt;" flags="m">
<fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replaceregexp>

This respects js and css pathes in the replacements.

Now you can run the build local:

cd build
ant copyViews minify

So here you could be done if your with FTP or your favourite upload method, just upload the optimized files from the publish dir to their resp. location.

Next time more with integrating that in your git deployment.

One Reply to “Silex, Twig und HTML5 BoilerPlate”

Leave a Reply

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