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="<!-- CSS concatenated [\d\w\s\W]*?!-- end CSS-->" replace="<link rel='stylesheet' href='${style.css}'>" flags="m"> <fileset dir="${dir.intermediate}" includes="${page-files}"/> </replaceregexp>
with this:
<replaceregexp match="<link rel=['"]?stylesheet['"]?\s+href=['"]?(.*)/${file.root.stylesheet}(?:\?.*)?['"]?\s*>" replace="<link rel='stylesheet' href='/${css.sha}.css'>" flags="m"> <fileset dir="${dir.intermediate}" includes="${page-files}"/> </replaceregexp>
and
<replaceregexp match="<!-- scripts concatenated [\d\w\s\W]*?!-- end ((scripts)|(concatenated and minified scripts))-->" replace="<script defer src='${scripts.js}\'></script>" flags="m"> <fileset dir="${dir.intermediate}" includes="${page-files}"/> </replaceregexp>
with this:
<replaceregexp match="<!-- scripts concatenated [\d\w\s\W]*<script.*src=['"]?(.*)/${file.root.script}(?:\?.*)?['"]?\s*>\s*</script>[\d\w\s\W]*<!-- end ((scripts)|(concatenated and minified scripts))\s*-->" replace="<script defer src='/${scripts.sha}.js\'></script>" 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.
I guess you could also set some symlinks to the js, css dirs in the views dir and use views as dir.source.
If your OS supports that.