Open up the built CSS file. Ugh. All that nasty whitespace that my user’s
are going to download. Is there nothing we can do?
Reason #1 to use Assetic was because of its filters, like cssrewrite.
It also has filters to minify assets. Your best option is to use a binary
called uglifycss through Assetic. There’s also an uglify-js.
We’re also going to get a crash-course in npm, the Composer for node.js.
Very Rebel hipster of us.
First, create a nearly empty package.json file - this is like the composer.json
for node libraries:
Next, install uglify!
npm install uglifycss --save
If you don’t have npm, install node.js to get it. This installs uglifycss
into a node_modules directory. It also updated our package.json file
to have this library. Another developer on the project only needs to run
npminstall to download uglify. Nice. In fact, let’s add node_modules/
to our .gitignore file, just like we did for the vendor/ directory:
Ok, I got a little over-excited about whitespace and made working with CSS
hell. Our browser thinks that every style is coming from line 1 of these files...
because there’s only one line in each. Good luck frontend people!
Really, I want the uglifycss filter to only run in the prod environment.
We can do just this by adding a ? before the filter name:
the same. Symfony has a cookbook entry about this, but seriously, it’s
no different at all. Even the minification is the same, except that the
library is called uglify-js.
In other words, you now know pretty much everything you need to about Assetic.
If you start using it a lot and notice your pages loading slower and
slower, check out the use_controller option that’s mentioned on that