diff --git a/README.md b/README.md index fe79a98966..7b95142a7c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # ![RealWorld Example App](https://cloud.githubusercontent.com/assets/556934/25448178/3e7dc5c0-2a7d-11e7-8069-06da5169dae6.png) -👉 I gave [a talk](https://www.youtube.com/watch?v=x1FU3e0sT1I), +👉 I gave [a talk](https://www.youtube.com/watch?v=x1FU3e0sT1I) to explain the principles I used to build this. I highly recommend watching it! > [Elm](http://elm-lang.org) codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld-example-apps) spec and API. @@ -19,11 +19,11 @@ Check out [the full writeup](https://dev.to/rtfeldman/tour-of-an-open-source-elm # Building -I decided not to include a build sccript, since all you need for local development is the `elm` executable, and all you need on top of that for production is Uglify. +I decided not to include a build script, since all you need for a development build is the `elm` executable, and all you need on top of that for production is Uglify. ## Development Build -Here's how to do a development build: +[Install Elm](https://guide.elm-lang.org/install.html) (e.g. with `npm install --global elm`), then from the root project directory, run this: ``` $ elm make src/Main.elm --output elm.js @@ -35,9 +35,11 @@ If you want to include the time-traveling debugger, add `--debug` like so: $ elm make src/Main.elm --output elm.js --debug ``` +To view the site in a browser, bring up `index.html` from any local HTTP server, for example [`http-server`](https://www.npmjs.com/package/http-server). + ## Production Build -This is a two-step process. First we compile `elm.js` using `elm make` with `--optimize`, and then we run Uglify on the result. +This is a two-step process. First we compile `elm.js` using `elm make` with `--optimize`, and then we Uglify the result. #### Step 1 @@ -45,7 +47,7 @@ This is a two-step process. First we compile `elm.js` using `elm make` with `--o $ elm make src/Main.elm --output elm.js --optimize ``` -This generates production-optimized JS that is ready to be minified further using Uglify. +This [generates production-optimized JS](https://elm-lang.org/blog/small-assets-without-the-headache) that is ready to be minified further using Uglify. #### Step 2 @@ -55,4 +57,6 @@ This generates production-optimized JS that is ready to be minified further usin $ uglifyjs elm.js --compress 'pure_funcs="F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9",pure_getters=true,keep_fargs=false,unsafe_comps=true,unsafe=true' --output=elm.js && uglifyjs elm.js --mangle --output=elm.js ``` -This runs `uglifyjs` twice - first with `--compress` and then again with `--mangle`. It's necessay to do separate passes if you use `pure_funcs` with Uglify, because if you do both `--compress` and `--mangle` at the same time, the `pure_funcs` argument will have no effect (Uglify will mangle the names first and then not recognize them when it encounters those functions later). +This one lengthy command (make sure to scroll horizontally to get all of it if you're copy/pasting!) runs `uglifyjs` twice - first with `--compress` and then again with `--mangle`. + +> It's necessay to run Uglify twice if you use the `pure_funcs` flag, because if you enable both `--compress` and `--mangle` at the same time, the `pure_funcs` argument will have no effect; Uglify will mangle the names first and then not recognize them when it encounters those functions later.