I’m doing similar thing, although my goal is not to avoid Node (since that cannot be avoided for JS and CSS postprocessing), but to avoid Webpack and other bundlers. I’m using make
instead of Mix tasks. Here’s my assets/Makefile
so far:
# Make targets for assets.
css:
@echo 'Building CSS...'
@mkdir -p ../priv/static/css
@cat \
vendor/nprogress-0.2.0/nprogress.css \
css/app.css > ../priv/static/css/app.css
js:
@echo 'Building JS...'
@mkdir -p ../priv/static/js
@cat \
../deps/phoenix/priv/static/phoenix.js \
../deps/phoenix_html/priv/static/phoenix_html.js \
../deps/phoenix_live_view/priv/static/phoenix_live_view.js \
vendor/nprogress-0.2.0/nprogress.js \
js/app.js > ../priv/static/js/app.js
static:
@echo 'Building static...'
@cp -R static/* ../priv/static/
clean:
@echo 'Cleaning assets...'
@rm -rf ../priv/static/*
build: css js static
.PHONY: css js static
I’ll be adding CSS and JS minification later.
Here’s my watchers config (using watchexec
, dynamic endpoint config):
defmodule MyApp.Endpoint do
use Phoenix.Endpoint, otp_app: :my_app
# ...
# Dynamic endpoint configuration.
# See: https://hexdocs.pm/phoenix/Phoenix.Endpoint.html#module-endpoint-configuration
def init(:supervisor, config) do
{:ok, endpoint_config(config)}
end
defp endpoint_config(config) do
config
|> Keyword.merge(
# ...
)
|> Keyword.merge(
case MyApp.app_env() do
"development" ->
[
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with webpack to recompile .js and .css sources.
watchers: [
watcher(["watchexec", "-e", "css", "make", "css"]),
watcher(["watchexec", "-e", "js", "make", "js"]),
watcher(["watchexec", "-e", "png,ico,txt", "make", "static"])
],
# ...
]
# ...
end
)
end
# Returns a watcher that runs in the assets/ dir by running the specified command with args.
# Uses the assets/wrapper script to work around commands that don't properly watch STDIN.
defp watcher(args) do
working_dir = Path.expand("../../assets", __DIR__)
# The executable is run via System.cmd which expects the executable
# to be available in PATH or an absolute path.
{Path.join(working_dir, "wrapper"), args ++ [cd: working_dir]}
end
end
and the wrapper script:
#!/usr/bin/env bash
# See https://hexdocs.pm/elixir/Port.html#module-zombie-operating-system-processes
# Start the program in the background
exec "$@" &
pid1=$!
# Silence warnings from here on
exec >/dev/null 2>&1
# Read from stdin in the background and
# kill running program when stdin closes
exec 0<&0 $(
while read; do :; done
kill -KILL $pid1
) &
pid2=$!
# Clean up
wait $pid1
ret=$?
kill -KILL $pid2
exit $ret