diff --git a/Makefile b/Makefile index a9d2b4a..a00a03f 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,26 @@ 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: + @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/$(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 + @mkdir -p /tmp/$(APP_NAME) + @node-sass --watch client --watch shared --watch bower_components \ + --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)