This article is targeted at Zend Framework programmers on OSX that use Assetic to compile their CSS/JS. With some interpretation, it might work for you if you don't fit into the above!
Hot reloading means reloading parts of a page without reloading the page itself. If you've worked on SPA apps in React or Angular, this is a must-have, but MVC stackers ignore you can have this cake and eat it too with the ZF3/Twig/Assetic combo on OSX.
Plus, it makes CSS work kind of fun (at most). I'd rather be doing other stuff too.
Your workflow becomes this:
- You modify your SCSS
- Something compiles your SCSS to CSS
- Assetic has to be triggered (typically triggered on page load, the usual)
- The CSS in the page has to reload dynamically
Step 1 is you, that part is clear. How do we get the rest working...
Prepros
Your first quest on this journey to reload-button independence is to run Prepros, which dually provides file compilation and a reload proxy.
- Fire up Prepros
- Add a new Project within Prepros, and set the base folder right at your module's assets folder (so, not your public folder -- the place where your SCSS initially compiles to CSS).
- Under Settings:
- enable the file watcher
- enable live preview, and use custom server
- set your server URL to be the domain that serves your stuff
- Under Live reload
- enable live reload
- enable animate css changes (this is the cool part)
- configure live reload delay. This one is a bit of a magic value that'll need some tuning. It's a function of your computer's speed. Essentially, this is the time that assetic needs to run. If you have a reasonably fast computer, you can set this to 2000. If you find that it stutters sometimes, you will need to increase its value.
- Under Composer Settings
- set your compiler to Node Sass. Zero chance that Ruby will be fast enough to please you.
If you make some SCSS changes now, you should see Prepros compile your CSS for you. You even get the fancy OSX notifications as confirmation that it's working. Point your browser to http://localhost:7880 (or whatever port you configured in Prepros), and you will see your site! The problem is that the CSS isn't changing; why?!
You got it.
There's no page reload, nothing invokes the Zend MVC stack, and Assetic is therefore asleep. Let's find another way to trigger Assetic.
Fswatch
Enter fswatch, https://github.com/emcrisostomo/fswatch, which can use the extremely efficient FSEvents on OSX to trigger filesystem events.
Install it with homebrew by issuing: brew install fswatch
Now, go into your Project's base folder, and create a new file called 'watchcss' with these contents:
fswatch -e ".*" -i "\\.css$" -0 . | xargs -0 -n 1 -I {} ./vendor/bin/assetic buildThe command is simple; exclude everything, yet include CSS, and run vendor/bin/assetic build when something changes.
Make watchcss executable, and run it ./watchcss
Now, fswatch will trigger assetic whenever Prepros compiles your CSS files. Then, Prepros will wait 2000 ms (adjust this as required) and thereafter hot reload your CSS!
