more build stuff; readme changes; pull out sass from figwheel

.drone.sec

@@ -1 +1 @@
-eyJhbGciOiJSU0EtT0FFUCIsImVuYyI6IkExMjhHQ00ifQ.ZY7Po1MEtvSbw5VU1vGIuWRHwqY9G4ni8e4zz2ULKZk94Mw-Ru3X8D69RXsm7idfHVnVraOPJb_Z8YnXkDVcVS6LmD42uHBvdmSmShvADS1Q85oUxvRyzmrtY3l2OJQ0CpMVgQIOv37mk5MJ1LSnZiMg5kDT0UhVW4ujXwIkBiwibMt4ApZi-rzusnQrWJFrrePTdMUSmMR2XPz0pGBgd2TuVw6K9_UrJj8tX2hrirVETLDldHLcAnV-0Q0-aldJf87KmCEGj068CJ5p-jq9pXj12_nkjDiZTnQJ0XUhL80oL9RqHrzrls5hsCfeZ0sJsngBYZIJ3-NeHoFrdoIG-w.jJN9anPWYfl2l-7_.z74VpFpxQH61VtOIYQq1uQgyw2HLABzFbJWiKr9Cl0R1UxGMpLKoGAX8L3QvcFtDTerN2AoLnEtwbKdGlPCPO6z0bZhNhGj_LP7YkOY6-aTijtLXNrgKf90eJcaswVByYfmku03B4QyxsdFTYEyXRigrLliL5k_IdLm4B0UYu_wGyu-FDuZbHMkXw_BlIYq6Gnrw0Qwe5WV_3mwBfO8kfFcSVy7Vzydo83LLhJkGh_qrSHuTjYrObfWiSz-dmEOQ3sAB-hp4_6hRzmjsb10XFxbmlOwJZn6RrnJ9G3V-xT3bLQfNx6UKFjxxv5qETPYgxiopibx9VStFHjPtqZdI8S1-rB-0yn1BJKQuTvzyHe22OUtEXVNkkMDzP0xM2EseL4wu1Wf0-etLkTuHLT_EgFhFS9DnoI0HMa51WcpwIwR28JNG1Uiipu3aAMZ2ne1JK_WABdjNZzhAlelEKyqtYVIeWIcXb_AL_L8dhvzK3KFs_YrJQ168Pfv8auG5xL0OydM9V6baTt186hmLA_6s5qvUtETB3wcd6_DWmCEyH1YDQIvkGcLh9pOi5b4fJw.dOKxeMYY3vU-F9q7bZLZow
+eyJhbGciOiJSU0EtT0FFUCIsImVuYyI6IkExMjhHQ00ifQ.ZsVB2WNmJF97Wq6WcR4H04VFd--TRGkh1s9wPkGYUywNOIhs1459GaYmM2FvKg0DIxwCwcfy1NOnoGxKGcPGs5fO4as3PmWJkP5PxuRya0paRdZzzrojeAVqavDWorNEcysjj02mKyb1VjH2GGaXCptbtIWtRfwslKHuajwymvwiAR_xXGlRBLiAo54WDDXAIrv5JNg0Kz5qKG_rzZzyCl3pew73e7Qtp5p2IokjYBlrMoVz3wF3KdzmXJJ6SaveV0cCIgCAYY9bMnSRKpRCdkKTYc9ykU3u1XaeO4yplxbekNrpSRGJSjW-OBTVsvFGo1MPZDx93xyunvDKUI2KpQ.vlcJAbneebuETe52._5bpcTq32UVxAjSpPavhu999hw6Mp1C2xSoPpf5d-guDb8oVM6UfQIjQx--XZLe69VpiPsslCxG9luv_RVc4uOKy8viyYdNB14D0QbNfPAFGUXMubU9F63CffEqijm6yhh1S2cfMUX4vzDHYiiMknlfw1x0yzspBzwRD5eehB4NC7JaFjq9L61fUQOOKvrxzpOJnV1fHjvGRDsKmUzkawtiqtfwhzXlGFhFPJCr1-jD_Jq4D6VsA0D9YjWT5NKz4dls50pFvekN_1Ck6HWoJAojj-B6FxHQvB928DCEzbeLRe0eViridmOvQiL_3mTUxY2wuUDxMXgdaCDxAtBvRQ2mPmouUVV2X3yyWia8xHM63RahxOPbua7uet7AJ2vERVoMeVspoPvSlivHp2GcmxNZBaRm1dSs-dmz2kpHgOOe5hANFC1HqBj3WNTZN4Fbkx7kMhYou6n_VYxypIT2KlzAQJp73ZFgK_SK2defunjhNfNpQmUbKhVxE1b3orqhKdFI9XefksKM4ou7ffp0UPmyk4ls7vDV7E4loVHCmwdJZzlwZSirjtVCg0m4DKg.e9CIx_0pCHA4XSwiO2zZiA

.drone.yml

@@ -1,28 +1,37 @@
 # .drone.yml
 
-# NOTE all changes to this file must be accompanied by a .drone.sec update,
-# or else the build will FAIL!
+# NOTE NOTE NOTE
+# all changes to this file must be accompanied by
+# a .drone.sec update, or else the build will FAIL!
 # see http://readme.drone.io/usage/secrets/
+#
+# i set up two shell environment variables, DRONE_TOKEN and DRONE_SERVER.
+# then added an alias:
+# alias dronesec="drone -t \$(echo \$DRONE_TOKEN) -s \$(echo \$DRONE_SERVER) secure --in secrets.yml --repo "
+# which can be used like this (in this directory):
+# $ dronesec core/ulysses-front
 
 clone:
   skip_verify: true
 
 build:
+  setup:
+    image: busybox
+    commands:
+      - . scripts/clean.sh
+      - mkdir -p resources/public/css/compiled
   npm-deps:
     image: mhart/alpine-node:4
     commands:
       - npm install
-
-  css:
+  sass:
     image: jbergknoff/sass
     commands:
-      - mkdir -p resources/public/css/compiled
       - sass --style compressed src/sass/app.scss resources/public/css/compiled/app.css
-  js:
+  cljs:
     image: andrewsuzuki/lein
     commands:
-      - lein deps
-      - lein with-profile prod cljsbuild once min
+      - . scripts/build-cljs.sh
 
 notify:
   slack:

Makefile

@@ -1,3 +1,5 @@
+PWD ?= $(shell pwd)
+DOCKER_RUN_THIS_WORKSPACE ?= docker run -it --rm -v $(PWD):$(PWD) -w $(PWD)
 NODE_BIN_DIR ?= node_modules/.bin
 PUBLIC_DIR ?= resources/public
 SASS_DEV_ARGS ?= --source-map true --output $(PUBLIC_DIR)/css/compiled/ src/sass/app.scss
@@ -6,48 +8,41 @@ help:
 	@echo
 	@echo "  \\033[4mulysses front-end\\033[0m"
 	@echo
-	@echo "  \\033[1mstart\\033[0m           –  start dev live-reload server for sass/cljs/tests"
-	@echo "  \\033[1mbuild\\033[0m           –  compile cljs and sass for production"
+	@echo "  \\033[1mstart\\033[0m           –  start dev live-reload server for cljs/tests/css"
+	@echo "  \\033[1msass-watch\\033[0m      –  watch & build sass with source maps in container"
+	@echo "  \\033[1mbuild\\033[0m           –  compile cljs and sass for production in containers"
 	@echo
 	@echo "  clean           –  clean compiled files"
-	@echo "  install         –  install lein and npm dependencies"
 	@echo "  build-cljs      –  build cljs files for production"
-	@echo "  build-sass      –  build sass files for production"
-	@echo "  build-sass-dev  –  build sass for dev [no watch]"
-	@echo "  watch-sass-dev  –  build sass for dev [watch]"
+	@echo "  sass-dev        –  build css files for dev (once)"
+	@echo "  install         –  install npm dependencies (in container)"
 	@echo "  help            –  show help"
 	@echo
 
 clean:
-	@lein clean
-
-install:
-	@npm install
-	@lein deps
+	. scripts/clean.sh
 
 build-cljs:
-	@lein with-profile prod cljsbuild once min
+	. scripts/build-cljs.sh
 
-build-sass:
-	@$(NODE_BIN_DIR)/node-sass --output-style compressed src/sass/app.scss $(PUBLIC_DIR)/css/compiled/app.css
+install:
+	$(DOCKER_RUN_THIS_WORKSPACE) mhart/alpine-node:4 npm install
 
-build-sass-dev:
-	$(NODE_BIN_DIR)/node-sass $(SASS_DEV_ARGS)
+sass-dev:
+	@mkdir -p $(PUBLIC_DIR)/css/compiled
+	@$(DOCKER_RUN_THIS_WORKSPACE) jbergknoff/sass --sourcemap src/sass/app.scss $(PUBLIC_DIR)/css/compiled/app.css
 
-watch-sass-dev:
-	@$(NODE_BIN_DIR)/node-sass --watch $(SASS_DEV_ARGS)
+sass-watch:
+	make sass-dev
+	filewatcher -s 'src/sass/**/*.scss' 'make sass-dev'
 
 build:
-	pwd
-	@$(MAKE) clean
-	@$(MAKE) install
-	@$(MAKE) build-sass
-	@$(MAKE) build-cljs
+	drone exec
 
 start:
 	@$(MAKE) clean
 	@$(MAKE) install
-	@$(MAKE) build-sass-dev
+	@$(MAKE) sass-dev
 	@lein run -m clojure.main --init src/clj/figwheel.clj -r
 
-.PHONY: help clean install build-cljs build-sass build-sass-dev watch-sass-dev build start
+.PHONY: help clean build-cljs install sass-dev sass-watch build start

README.md

@@ -21,31 +21,59 @@ stack:
 
 * tests: [doo](https://github.com/bensu/doo)
 
+* ci: [drone](https://github.com/drone/drone) [2]
+
 [1] definitely use [parinfer](https://shaunlebron.github.io/parinfer/) for clojure development. it makes paren/bracket management truly painless...fun even. available for atom, sublime, vim, etc.
 
+[2] NOTE any time `.drone.yml` is changed (even a comment), a new version of `.drone.sec` must be generated. see comment in .drone.yml for more info.
+
 ## prerequisites
 
-* [java jdk 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) (7 probably works too)
-* [leiningen 2](http://leiningen.org/) (includes clojure/clojurescript 1.8)
-* [npm/node](https://nodejs.org/en/download/)
+* [docker](https://docs.docker.com/engine/installation/) [3] [4]
+* [java jdk 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) [5]
+* [leiningen 2](http://leiningen.org/)
+* [filewatcher](https://github.com/thomasfl/filewatcher)
 * make
 
+optional:
+
+* [drone cli tools](http://readme.drone.io/devs/cli/) [6]
+
+[3] docker will eventually be the *only* dependency
+
+[4] if on mac/windows, you will need to use docker machine / virtual box then source the
+daemon connection using `eval $(docker-machine env default)`
+
+[5] java 7 probably works too, although that doesn't really matter given [3]
+
+[6] drone cli tools allow for simulating a drone build though its
+exec subcommand. can be run with `make build`, then you can just open index.html in a web browser.
+
 ## make
 
-run `make` to see available commands
+run `make` or `make help` to see available commands
 
 ## dev build w/ live reloading
 
 ```sh
 make start
 ```
 
-figwheel will automatically push cljs and sass changes to the browser,
+figwheel will automatically push cljs and css changes to the browser,
 as well as run tests (to be configured).
 
 wait a bit, then browse to [http://localhost:3449](http://localhost:3449)
 
-note: can't figure out how to exit node-sass when the repl is exited, so right now it becomes an orphaned process (on os x at least) and you'll have to kill it manually :(
+## sass
+
+```sh
+make sass-watch
+```
+
+requires filewatcher, see above.
+
+watches sass files, then uses sassc in an ephemeral docker container to
+rebuild when a file changes. also builds sourcemaps.
 
 <!--
 ### run tests:
@@ -64,10 +92,13 @@ the above command assumes that you have [phantomjs](https://www.npmjs.com/packag
 make build
 ```
 
+this will simulate a drone build locally through `drone exec`. js will be optimized,
+so it takes a while.
+
 ## cleanup
 
 ```sh
 make clean
 ```
 
-will remove `:clean-targets` (specified in `project.clj`) including compiled js, sass, etc
+removes compiled css, js, java class files, etc

scripts/build-cljs.sh

@@ -0,0 +1 @@
+lein with-profile prod cljsbuild once min

scripts/clean.sh

@@ -0,0 +1,6 @@
+rm -rf .sass-cache
+rm -rf node_modules
+rm -rf resources/public/js/compiled
+rm -rf resources/public/css/compiled
+rm -rf target
+rm -rf test/js

src/clj/figwheel.clj

@@ -5,9 +5,6 @@
 
 (import 'java.lang.Runtime)
 
-;; sass watcher adapted from:
-;; https://github.com/bhauman/lein-figwheel/wiki/SASS-watcher
-
 (def figwheel-config
   {:figwheel-options {:css-dirs ["resources/public/css"]}
    :build-ids ["dev", "test"] ; NOTE test as well?
@@ -27,20 +24,6 @@
                     :main          "ulysses.runner"
                     :optimizations :none}}]})
 
-(def sass-config
-  {:executable-path "./node_modules/.bin/node-sass" ; e.g. /usr/local/bin/sass
-   :input-file "src/sass/app.scss" ; location of the sass/scss files
-   :output-path "resources/public/css/compiled/"})
-
-(defn sass-cmd [watch?]
-  (string/join " "
-    (concat
-      [(:executable-path sass-config)]
-      ["--source-map" "true"
-       "--output" (:output-path sass-config)]
-      (let [input (:input-file sass-config)]
-        (if watch? ["--watch" input] [input])))))
-
 (defrecord Figwheel []
   component/Lifecycle
   (start [config]
@@ -50,28 +33,10 @@
     (ra/stop-figwheel!)
     config))
 
-(defrecord SassWatcher [executable-path input-file output-path]
-  component/Lifecycle
-  (start [config]
-    (if (not (:sass-watcher-process config))
-      (let [cmd (sass-cmd true)]
-        (do
-          (println "Figwheel: Starting sass watch process")
-          (println cmd)
-          (assoc config :sass-watcher-process
-                 (.exec (Runtime/getRuntime) cmd))))
-      config))
-  (stop [config]
-    (when-let [process (:sass-watcher-process config)]
-      (println "Figwheel: Stopping sass watch process")
-      (.destroy process))
-    config))
-
 (def system
   (atom
    (component/system-map
-    :figwheel (map->Figwheel figwheel-config)
-    :sass (map->SassWatcher sass-config))))
+    :figwheel (map->Figwheel figwheel-config))))
 
 (defn start []
   (swap! system component/start))
@@ -88,4 +53,4 @@
 
 ;; start the components and the repl
 (start)
-; (repl) ;; NOTE cljs repl is good but on quit, node-sass becomes a orphaned process...TODO
+(repl)