Arantium Maestum

プログラミング、囲碁、読書の話題

Clojure Web Development勉強 - Garden（その２）lein-gardenでCSSをオートコンパイル

Clojure Web CSS Garden

前回紹介したワークフローだとCSSをednで定義できるのはいいが、二つほど問題があった。

  1. 変更の度にいちいちlein runでCSSをコンパイルする必要がある
  2. -main関数をCSSコンパイルのために使っていた

lein-gardenはこの二つの問題を同時に解決する、gardenコンパイル用のlein pluginである。

project.clj

dependenciesにgarden、pluginsにlein-garden、そしてgardenのコンパイル設定を別途指定している：

(defproject min-lein-garden "0.0.1"
  :dependencies [[org.clojure/clojure "1.8.0"]
                 [garden "1.3.2"]]
  :plugins [[lein-garden "0.3.0"]]
  :garden
  {:builds [{:source-paths ["src"]
             :stylesheet min-lein-garden.core/style
             :compiler {:output-to "resources/public/css/main.css"}}]})

:gardenの指示は以前からちょくちょく出ている:cljsbuildのコンパイル設定とけっこう似ている。

の三点を指定。コンパイルしたいcssファイルごとに:buildsの中のvectorに設定mapを入れてやればいい。

core.clj

CSS自体の定義はcore.cljで：

(ns min-lein-garden.core
  (:require [garden.def :refer [defstyles]]))

(defstyles style
  [:body
   {:font-size "14px"
    :background "#f00"}])

前回のようにcssマクロでgardenデータを文字列に変形するのではなく、defstylesというマクロを使ってstyleという名前のgardenデータ構造を定義している。project.cljに渡していた:stylesheetのmin-lein-garden.core/styleという変数名とこのdefstyleで定義している変数名は一致する必要がある。

ディレクトリ構造と実行方法

ディレクトリ構造は非常に簡単で、以下の通り：

.
├── project.clj
└── src
    └── min_lein_garden
        └── core.clj

lein-gardenが自動で出力先のディレクトリなどを作成してくれる。

シェル・プロンプトでlein garden autoと叩くと

Compiling Garden...

Compiling "resources/public/css/main.css"...

Wrote: resources/public/css/main.css

Successful

というような表示が出て、プロセスが走り続ける。別のウィンドウからresources/public/css/main.cssを覗いてみると

body {
  font-size: 14px;
  background: #f00;
}

とちゃんとコンパイルされているのがわかる。

これでcore.cljのdefstylesを以下のようにいじって保存すると：

(defstyles style
  [:body
   {:font-size "16px"
    :background "#ff0"
    :color "#fff"}])

lein garden autoが走っているシェルでは自動的に以下のように表示されて：

Compiling "resources/public/css/main.css"... Wrote: resources/public/css/main.css Successful

main.cssはこのようになっている：

body {
  font-size: 16px;
  background: #ff0;
  color: #fff;
}

これで-main関数を使わず、gardenデータを定義しているファイルを保存するだけで自動的にcssが出力される設定が実現できた。

次回はこれをfigwheelと合わせることで、gardenを定義・変更することでブラウザ上で動的にスタイルが変わっていくのを確認できる環境を設定する。