From 8e3ea9dc08e7577a5e24d4e51d8be7415e5369ea Mon Sep 17 00:00:00 2001 From: Ben Fletcher Date: Tue, 11 Oct 2016 17:51:36 +0100 Subject: [PATCH 1/3] fast build & watch tasks --- Makefile | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/Makefile b/Makefile index a9d2b4a..bbce582 100644 --- a/Makefile +++ b/Makefile @@ -67,6 +67,28 @@ watc%: @if [ -e webpack.config.js ]; then webpack --watch --dev; fi @$(DONE) +# +# VERY FAST BUILD & WATCH +# Potentially to replace the original build and watch with +# + +fast-buil%: _fast-build_css _fast-build_js + @$(DONE) + +# Reload page version +fast-watch-reloa%: + @$(MAKE) _fast-watch BS="--no-inject-changes" + +# Inject replacement CSS & not reload page +# +# Doesn't work with critical CSS because it is inlined in the page. You can +# either a) temporarily move critical CSS you're working on out of critical CSS +# block, b) manually reload page after critical CSS changes, or c) use the +# reload page version above instead +# +fast-watch-injec%: + @$(MAKE) _fast-watch + # # SUB-TASKS # @@ -147,3 +169,24 @@ update-tools: @read -p "Updated tools from $(VERSION) to $(LATEST). Do you want to commit and push? [y/N] " Y;\ if [ $$Y == "y" ]; then git add n.Makefile && git commit -m "Updated tools to $(LATEST)" && git push origin HEAD; fi @$(DONE) + +# VERY FAST BUILD & WATCH SUB-TASKS + +_fast-build_css: + @node-sass --source-comments --include-path bower_components --output /tmp client/main.scss + @mkdir -p public + @node split-css /tmp/main.css public + @echo "/* dummy to start the app... not for production use! */" > public/main-ie8.css + +_fast-build_js: + webpack --dev --no-css + +_fast-watch: _fast-build_css + @echo STARTED ONCE + @node-sass --watch client --watch shared --watch bower_components \ + --source-comments --include-path bower_components --output /tmp client/main.scss & + @nodemon --watch /tmp/main.css --exec "node split-css /tmp/main.css public" & + @webpack --watch \ + --dev --no-css & + @browser-sync start --proxy https://local.ft.com:5050 --files public $(BS) + From 5e5b136503b9bcfb7cccab50ebf91fe794b41e73 Mon Sep 17 00:00:00 2001 From: Ben Fletcher Date: Tue, 11 Oct 2016 19:06:09 +0100 Subject: [PATCH 2/3] add autoprefixer (postcss) and multi-app support --- Makefile | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/Makefile b/Makefile index bbce582..1ab3b93 100644 --- a/Makefile +++ b/Makefile @@ -173,19 +173,22 @@ update-tools: # VERY FAST BUILD & WATCH SUB-TASKS _fast-build_css: - @node-sass --source-comments --include-path bower_components --output /tmp client/main.scss + @mkdir -p /tmp/$(APP_NAME) + @node-sass --source-comments --include-path bower_components --output /tmp/$(APP_NAME) client/main.scss + @postcss --use autoprefixer --autoprefixer.browsers '> 1%' --autoprefixer.browsers 'last 2 versions' --autoprefixer.browsers 'ie >= 8' --autoprefixer.browsers 'ff ESR' --autoprefixer.browsers 'bb >= 7' --autoprefixer.browsers 'iOS >= 5' --autoprefixer.flexbox 'no-2009' /tmp/$(APP_NAME)/main.css --output /tmp/$(APP_NAME)/autoprefixed.css @mkdir -p public - @node split-css /tmp/main.css public + @node split-css /tmp/$(APP_NAME)/autoprefixed.css main.css public @echo "/* dummy to start the app... not for production use! */" > public/main-ie8.css _fast-build_js: webpack --dev --no-css _fast-watch: _fast-build_css - @echo STARTED ONCE + @mkdir -p /tmp/$(APP_NAME) @node-sass --watch client --watch shared --watch bower_components \ - --source-comments --include-path bower_components --output /tmp client/main.scss & - @nodemon --watch /tmp/main.css --exec "node split-css /tmp/main.css public" & + --source-comments --include-path bower_components --output /tmp/$(APP_NAME) client/main.scss & + @postcss --watch --use autoprefixer --autoprefixer.browsers '> 1%' --autoprefixer.browsers 'last 2 versions' --autoprefixer.browsers 'ie >= 8' --autoprefixer.browsers 'ff ESR' --autoprefixer.browsers 'bb >= 7' --autoprefixer.browsers 'iOS >= 5' --autoprefixer.flexbox 'no-2009' /tmp/$(APP_NAME)/main.css --output /tmp/$(APP_NAME)/autoprefixed.css & + @nodemon --watch /tmp/$(APP_NAME)/autoprefixed.css --exec "node split-css /tmp/$(APP_NAME)/autoprefixed.css main.css public" & @webpack --watch \ --dev --no-css & @browser-sync start --proxy https://local.ft.com:5050 --files public $(BS) From e5cf943b17e88b2e27fc1efd28723472649d3463 Mon Sep 17 00:00:00 2001 From: Ben Fletcher Date: Tue, 11 Oct 2016 19:09:05 +0100 Subject: [PATCH 3/3] remove newline at end --- Makefile | 1 - 1 file changed, 1 deletion(-) diff --git a/Makefile b/Makefile index 1ab3b93..a00a03f 100644 --- a/Makefile +++ b/Makefile @@ -192,4 +192,3 @@ _fast-watch: _fast-build_css @webpack --watch \ --dev --no-css & @browser-sync start --proxy https://local.ft.com:5050 --files public $(BS) -