Building frontend with Mix Tasks

frontend.build.ex

defmodule Mix.Tasks.Frontend.Build do
  use Mix.Task
  import CodeStats.TaskUtils

  @shortdoc "Build the frontend"

  def run(_) do
    run_tasks([
      "frontend.build.riot",
      "frontend.build.scss"
    ])
  end
end

frontend.build.riot.ex

defmodule Mix.Tasks.Frontend.Build.Riot do
  use Mix.Task
  import CodeStats.TaskUtils

  @shortdoc "Build the RiotJS sources"

  def riot_paths(), do: [
    "web/static/riot",
    "priv/static/riot"
  ]

  def run(_) do
    exec(node_path("/.bin/riot"), riot_paths()) |> listen()
  end
end

frontend.build.scss.ex

defmodule Mix.Tasks.Frontend.Build.Scss do
  use Mix.Task
  import CodeStats.TaskUtils

  @shortdoc "Build the SCSS sources"

  def sass_args() do
    [
      "-o",
      "priv/static/css",
      "--source-map",
      "true",
      "--include-path",
      "node_modules/bootstrap-sass/assets/stylesheets",
      "--precision",
      "8"
    ]
  end

  def scss_file(), do: "web/static/css/app.scss"

  def run(_) do
    exec(
      node_path("/.bin/node-sass"),
      sass_args() ++ [scss_file()]
    ) |> listen()
  end
end

frontend.watch.ex

defmodule Mix.Tasks.Frontend.Watch do
  use Mix.Task
  import CodeStats.TaskUtils
  alias Mix.Tasks.Frontend.Build.{Riot, Scss}

  @shortdoc "Watch frontend and rebuild when necessary"

  def run(_) do
    [
      exec(
        node_path("/.bin/riot"),
        ["-w"] ++ Riot.riot_paths()
      ),
      exec(
        node_path("/.bin/node-sass"),
        Scss.sass_args() ++ [
          "-w",
          Scss.scss_file()
        ]
      )
    ] |> watch()
  end
end

output.txt

Kerosene:code_stats nicd$ mix frontend.build

08:18:10.719 [info]  [Started] frontend.build.riot

08:18:10.719 [info]  [Started] frontend.build.scss

08:18:10.719 [debug] [Spawned] riot

08:18:10.720 [debug] [Spawned] node-sass

08:18:11.271 [debug] [riot] web/static/riot/test.tag -> priv/static/riot/test.js

08:18:11.278 [debug] [Stopped] riot

08:18:11.278 [info]  [Finished] frontend.build.riot

08:18:11.388 [debug] [node-sass] Rendering Complete, saving .css file...

08:18:11.392 [debug] [node-sass] Wrote CSS to /Users/nicd/svn/code_stats/priv/static/css/app.css

08:18:11.393 [debug] [node-sass] Wrote Source Map to /Users/nicd/svn/code_stats/priv/static/css/app.css.map

08:18:11.401 [debug] [Stopped] node-sass

08:18:11.401 [info]  [Finished] frontend.build.scss

watch_output.txt

Kerosene:code_stats nicd$ mix frontend.watch

08:18:21.049 [debug] [Spawned] riot

08:18:21.050 [debug] [Spawned] node-sass

08:18:21.050 [info]  Programs started, press ENTER to exit.

08:18:21.791 [debug] [riot] web/static/riot/test.tag -> priv/static/riot/test.js

08:18:21.792 [debug] [riot] Watching: web/static/riot/**/*.tag

08:18:36.203 [debug] [node-sass] => changed: /Users/nicd/svn/code_stats/web/static/css/app.scss

08:18:36.328 [debug] [node-sass] Rendering Complete, saving .css file...

08:18:36.333 [debug] [node-sass] Wrote CSS to /Users/nicd/svn/code_stats/priv/static/css/app.css

08:18:36.333 [debug] [node-sass] Wrote Source Map to /Users/nicd/svn/code_stats/priv/static/css/app.css.map

08:18:39.581 [debug] [node-sass] => changed: /Users/nicd/svn/code_stats/web/static/css/app.scss

08:18:39.715 [debug] [node-sass] Rendering Complete, saving .css file...

08:18:39.717 [debug] [node-sass] Wrote CSS to /Users/nicd/svn/code_stats/priv/static/css/app.css

08:18:39.717 [debug] [node-sass] Wrote Source Map to /Users/nicd/svn/code_stats/priv/static/css/app.css.map


08:18:41.171 [info]  ENTER received, killing tasks.

08:18:41.171 [debug] [Killing] riot

08:18:41.171 [debug] [Killing] node-sass