View Source ExWebp
Mix tasks for installing and invoking webp.
installation
Installation
If you are going to build assets in production, then you add
webp
as a dependency on all environments but only start it
in dev:
def deps do
[
{:webp, "~> 0.1", runtime: Mix.env() == :dev}
]
end
However, if your assets are precompiled during development, then it only needs to be a dev dependency:
def deps do
[
{:webp, "~> 0.1", only: :dev}
]
end
usage-there-are-2-ways-to-use-as-a-mix-task-or-as-a-library-mix-task-usage-detailed-below
Usage: there are 2 ways to use as a mix task or as a library -- mix task usage detailed below
$ mix webp default "assets/images/"
profiles
Profiles
The first argument to webp
is the execution profile.
You can define multiple execution profiles with the current
directory, the OS environment, and default arguments to the
webp
task:
config :webp,
default: [
location: Path.expand("../priv/static/images/", __DIR__),
destination: Path.expand("../priv/static/images/", __DIR__)
]
When mix webp default
is invoked, the task arguments will be appended
to the ones configured above.
adding-to-phoenix
Adding to Phoenix
To add webp
to an application using Phoenix, you need only four steps.
Note that installation requires that Phoenix watchers can accept MFArgs
tuples – so you must have Phoenix > v1.5.9.
First add it as a dependency in your mix.exs
:
def deps do
[
{:phoenix, "~> 1.6.0"},
{:webp, "~> 0.1", runtime: Mix.env() == :dev}
]
end
Now let's configure webp
to use assets/images/
as the input file and
compile CSS to the output location priv/static/assets/images/
:
config :webp,
default: [
location: Path.expand("../priv/static/images/", __DIR__),
destination: Path.expand("../priv/static/images/", __DIR__)
]
Note: if you are using esbuild (the default from Phoenix v1.6), make sure you remove the
import "../css/app.css"
line at the top of assets/js/app.js soesbuild
stops generating css files.
Note: make sure the "assets" directory from priv/static is listed in the :only option for Plug.Static in your endpoint file at, for instance
lib/my_app_web/endpoint.ex
.
For development, we want to enable watch mode. So find the watchers
configuration in your config/dev.exs
and add:
webp: {Webp, :run, [:default, ~w(--watch)]}
Note we are embedding source maps with absolute URLs and enabling the file system watcher.
Finally, back in your mix.exs
, make sure you have an assets.deploy
alias for deployments
["assets.deploy": [
"esbuild default --minify",
"webp default",
"phx.digest"
]]
css-webp-support
css webp support
you will need to create webp styles in css and toggle then with some js, i load modernizer with webp support in the layout below is an example css
.no-webp .img-class {
background-image: url("../images/img.png");
background-repeat: no-repeat;
left: 100px;
position: absolute;
height: 411px;
width: 745px;
}
.webp .img-class {
background-image: url("../images/img.webp");
background-repeat: no-repeat;
left: 100px;
position: absolute;
height: 411px;
width: 745px;
}
and the corresponding added to the layout
<html class="no-js" lang="en">
<script type="text/javascript">
document.documentElement.classList.remove("no-js");
</script>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/modernizr_webp.js") %>"></script>
</html>
acknowledgements
Acknowledgements
This package is based on the excellent esbuild by Wojtek Mach and José Valim.
license
License
Copyright (c) 2022 mithereal.
webp source code is licensed under the MIT License.