From fd1796557d0e440e81d975e970778e17214f9828 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 7 Aug 2019 20:08:11 +0200 Subject: [PATCH] :sparkles: Introduce modules and code splitting on the build system. --- frontend/gulpfile.js | 15 +-- frontend/resources/index.mustache | 7 +- frontend/resources/view.mustache | 8 +- frontend/scripts/build-develop.sh | 4 +- frontend/scripts/build-production.sh | 5 +- frontend/tools.clj | 165 ++++++++++++++++----------- 6 files changed, 121 insertions(+), 83 deletions(-) diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index 9cbb5e598..69bc0d117 100644 --- a/frontend/gulpfile.js +++ b/frontend/gulpfile.js @@ -22,7 +22,7 @@ paths.scss = paths.app + "styles/**/*.scss"; gulp.task("clean", function(next) { rimraf(paths.output + "css/", function() { rimraf(paths.output + "js/", function() { - rimraf(paths.target, next); + next() }); }); }); @@ -85,14 +85,9 @@ function templatePipeline(options) { return function() { const input = options.input; const output = options.output; - const jspath = options.jspath; - const csspath = options.csspath; - const ts = Math.floor(new Date()); - const tmpl = mustache({ - jsfile: `${jspath}?v=${ts}`, - cssfile: `${csspath}?v=${ts}` + ts: ts }); return gulp.src(input) @@ -105,8 +100,6 @@ function templatePipeline(options) { gulp.task("template:main", templatePipeline({ input: paths.app + "index.mustache", output: paths.output, - jspath: "/js/main.js", - csspath: "/css/main.css" })); gulp.task("template:view", templatePipeline({ @@ -142,15 +135,11 @@ gulp.task("dist:clean", function(next) { gulp.task("dist:template:main", templatePipeline({ input: paths.app + "index.mustache", output: paths.dist, - jspath: "/js/main.js", - csspath: "/css/main.css" })); gulp.task("dist:template:view", templatePipeline({ input: paths.app + "view.mustache", output: paths.dist + "view/", - jspath: "/js/view.js", - csspath: "/css/view.css" })); gulp.task("dist:template", gulp.parallel("dist:template:view", "dist:template:main")); diff --git a/frontend/resources/index.mustache b/frontend/resources/index.mustache index 8f77c4b9b..0da9872b3 100644 --- a/frontend/resources/index.mustache +++ b/frontend/resources/index.mustache @@ -4,7 +4,7 @@ UXBOX - The Open-Source prototyping tool - + @@ -12,7 +12,10 @@
- + + + + diff --git a/frontend/resources/view.mustache b/frontend/resources/view.mustache index d095eae42..ef12f25a5 100644 --- a/frontend/resources/view.mustache +++ b/frontend/resources/view.mustache @@ -5,14 +5,18 @@ UXBOX-view - The Open-Source prototyping tool - +
+
- + + + + diff --git a/frontend/scripts/build-develop.sh b/frontend/scripts/build-develop.sh index 95fdfa847..01bf6f566 100755 --- a/frontend/scripts/build-develop.sh +++ b/frontend/scripts/build-develop.sh @@ -8,4 +8,6 @@ npm ci npx gulp dist:clean || exit 1 npx gulp dist || exit 1 -clojure -Adev tools.clj build-all || exit 1 +clojure -Adev tools.clj build:all || exit 1 + +npx gulp dist:gzip || exit 1 diff --git a/frontend/scripts/build-production.sh b/frontend/scripts/build-production.sh index d09aefc18..2a4e87e16 100755 --- a/frontend/scripts/build-production.sh +++ b/frontend/scripts/build-production.sh @@ -10,4 +10,7 @@ export NODE_ENV=production; npx gulp dist:clean || exit 1; npx gulp dist || exit 1; -clojure -Adev tools.clj dist-all +clojure -Adev tools.clj dist:all || exit 1 + +npx gulp dist:gzip || exit 1 + diff --git a/frontend/tools.clj b/frontend/tools.clj index ff41a6464..f73b06a27 100644 --- a/frontend/tools.clj +++ b/frontend/tools.clj @@ -1,3 +1,4 @@ +(require '[clojure.pprint :refer [pprint]]) (require '[clojure.java.shell :as shell]) (require '[figwheel.main.api :as figwheel]) (require '[cljs.build.api :as api]) @@ -12,6 +13,8 @@ (println "Unknown or missing task. Choose one of:" interposed) (System/exit 1))) +;; --- Generic Build Options + (def debug? (boolean (:uxbox-debug env nil))) (def demo? (boolean (:uxbox-demo env nil))) @@ -24,47 +27,107 @@ {:cache-analysis true :parallel-build true :language-in :ecmascript6 - :language-out :ecmascript6 + :language-out :ecmascript5 :closure-defines closure-defines :optimizations :none - :verbose false + :verbose true + :source-map true :static-fns false :pretty-print true :elide-asserts false}) -(defn get-output-options - [name dist? map?] - (let [prefix (if dist? "dist/js" "resources/public/js") - srcmap (if (= map? ::path) - (str prefix "/" name ".js.map") - map?)] - {:main (symbol (str "uxbox." name)) - :output-to (str prefix "/" name ".js") - :output-dir (str prefix "/" name) - :source-map srcmap - :asset-path (str "/js/" name)})) +(def dist-build-options + {:optimizations :advanced + :pretty-print false + :static-fns true + ;; :fn-invoke-direct true + :elide-asserts true}) -(defmethod task "dist" - [[_ name]] - (api/build (api/inputs "src") - (merge default-build-options - (get-output-options name true ::path) - (when (= name "worker") - {:target :webworker}) - {:optimizations :advanced - :pretty-print false - :static-fns true - ;; :fn-invoke-direct true - :elide-asserts true}))) +;; --- Specific Build Options -(defmethod task "build" - [[_ name]] - (api/build (api/inputs "src") - (merge default-build-options - (get-output-options name true true) - (when (= name "worker") - {:target :webworker}) - {:optimizations :none}))) +(def main-build-options + {:output-dir "resources/public/js" + :asset-path "/js" + :modules {:common {:entries #{} + :output-to "resources/public/js/common.js"} + :main {:entries #{"uxbox.main"} + :output-to "resources/public/js/main.js" + :depends-on #{:common}} + :view {:entries #{"uxbox.view"} + :output-to "resources/public/js/view.js" + :depends-on #{:common}}}}) + +(def worker-build-options + {:main 'uxbox.worker + :target :webworker + :output-to "resources/public/js/worker.js" + :output-dir "resources/public/js/worker" + :asset-path "/js/worker"}) + +(def main-dist-build-options + (-> (merge default-build-options + main-build-options + dist-build-options) + (assoc :output-dir "dist/js") + (assoc-in [:modules :common :output-to] "dist/js/common.js") + (assoc-in [:modules :main :output-to] "dist/js/main.js") + (assoc-in [:modules :view :output-to] "dist/js/view.js"))) + +(def main-build-build-options + (merge main-dist-build-options + {:optimizations :none})) + +(def worker-dist-build-options + (merge default-build-options + worker-build-options + dist-build-options + {:output-to "dist/js/worker.js" + :output-dir "dist/js/worker" + :source-map "dist/js/worker.js.map"})) + +(def worker-build-build-options + (merge worker-dist-build-options + {:optimizations :none + :source-map true})) + +;; --- Tasks Definitions + +(defmethod task "dist:main" + [args] + (let [cfg main-dist-build-options] + ;; (pprint cfg) + (api/build (api/inputs "src") cfg))) + +(defmethod task "dist:worker" + [args] + (let [cfg worker-dist-build-options] + ;; (pprint cfg) + (api/build (api/inputs "src") cfg))) + +(defmethod task "build:main" + [args] + (let [cfg main-build-build-options] + ;; (pprint cfg) + (api/build (api/inputs "src") cfg))) + +(defmethod task "build:worker" + [args] + (let [cfg worker-build-build-options] + ;; (pprint cfg) + (api/build (api/inputs "src") cfg))) + +(defmethod task "build:all" + [args] + (task ["build:main"]) + (task ["build:worker"])) + +(defmethod task "dist:all" + [args] + (task ["dist:main"]) + (task ["dist:worker"])) + + +;; --- Tests Tasks (defmethod task "build-tests" [& args] @@ -78,25 +141,20 @@ :output-dir "target/tests/main" :optimizations :none))) +;; --- Figwheel Config & Tasks (def figwheel-builds {:main {:id "main" - :options (merge default-build-options - (get-output-options "main" false true))} - :view {:id "view" - :options (merge default-build-options - (get-output-options "view" false true))} + :options (merge default-build-options main-build-options)} :worker {:id "worker" - :options (merge default-build-options - {:target :webworker} - (get-output-options "worker" false true))}}) + :options (merge default-build-options worker-build-options)}}) (def figwheel-options {:open-url false + :pprint-config false :load-warninged-code true :auto-testing false - :css-dirs ["resources/public/css" - "resources/public/view/css"] + :css-dirs ["resources/public/css"] :ring-server-options {:port 3449 :host "0.0.0.0"} :watch-dirs ["src" "test"]}) @@ -105,29 +163,8 @@ (figwheel/start figwheel-options (:main figwheel-builds) - (:view figwheel-builds) (:worker figwheel-builds))) -(defmethod task "figwheel-single" - [[_ name]] - (when-let [build (get figwheel-builds (keyword name))] - (figwheel/start - figwheel-options - build - (:worker figwheel-builds)))) - -(defmethod task "build-all" - [args] - (task ["build" "main"]) - (task ["build" "view"]) - (task ["build" "worker"])) - -(defmethod task "dist-all" - [args] - (task ["dist" "main"]) - (task ["dist" "view"]) - (task ["dist" "worker"])) - ;;; Build script entrypoint. This should be the last expression. (task *command-line-args*)