Mojolicious::Plugin::AssetPack::Manual::Reloader - Enable automatic reloading of assets
It is possible to reload assets in the browser, when they are changed on disk.
This feature is EXPERIMENTAL, and should only be used while developing!
use Mojolicious::Lite; # need to specify to AssetPack that we want to enable "reloader" plugin AssetPack => {reloader => {}}; # define our own assets, define some routes and start the app app->asset("app.css" => "/css/app.css"); get "/" => "index"; app->start; __DATA__ @@ css/app.css body { background: #eee; } @@ index.html.ep <!DOCTYPE html> <html> <head> <title>Reloader demo</title> %= asset "app.css" %# Reloader is only available in development mode %= asset "reloader.js" if app->mode eq "development" </head> <body> Reloader demo. Try to change css/app.css and see this page auto-update. </body> </html>
To make this work, we need to start morbo and manually make it watch our files:
$ morbo -w morbo examples/reloader.pl -w lib -w templates -w public/css
reloader.js contains a JavaScript which connects to a WebSocket in our server. Every time the WebSocket connection is broken the JavaScript will trigger a refresh.
reloader.js
There are two different refresh strategies available: "head" and "document".
plugin AssetPack => { reloader => {strategy => "head"} };
Setting the strategy to "head" will only replace the head-tag in your document, while the default ("document") will refresh the whole document.
strategy
Jan Henning Thorsen - jhthorsen@cpan.org
jhthorsen@cpan.org
To install Mojolicious::Plugin::AssetPack, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Mojolicious::Plugin::AssetPack
CPAN shell
perl -MCPAN -e shell install Mojolicious::Plugin::AssetPack
For more information on module installation, please visit the detailed CPAN module installation guide.