jameslutley · July 1, 2018 01:26 · Jul 15, 2017 · Jul 15, 2017 · Jul 15, 2017 · Jun 29, 2017
diff --git a/post.md b/post.md
@@ -38,19 +38,19 @@ mix.options({
 Add a `.babelrc` file in your assets folder to prevent babel from compiling phoenix's local npm files in `../deps` and fill it with the following:
 ```json
 {
-	"presets": [
-		["env", {
-			"modules": false,
-			"targets": {
-					"browsers": ["> 2%"],
-					"uglify": true
-			}
-		}]
-	],
-	"ignore": [
-		"node_modules",
-		"deps"
-	]
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 2%"],
+        "uglify": true
+      }
+    }]
+  ],
+  "ignore": [
+    "node_modules",
+    "deps"
+  ]
 }
 ```
 

diff --git a/post.md b/post.md
@@ -38,19 +38,19 @@ mix.options({
 Add a `.babelrc` file in your assets folder to prevent babel from compiling phoenix's local npm files in `../deps` and fill it with the following:
 ```json
 {
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-          "browsers": ["> 2%"],
-          "uglify": true
-      }
-    }]
+	"presets": [
+		["env", {
+			"modules": false,
+			"targets": {
+					"browsers": ["> 2%"],
+					"uglify": true
+			}
+		}]
 	],
 	"ignore": [
-    "node_modules",
-    "deps"
-  ]
+		"node_modules",
+		"deps"
+	]
 }
 ```
 

diff --git a/post.md b/post.md
@@ -21,39 +21,56 @@ Copy the default generated laravel-mix config into your project assets directory
 ```bash
 $ cp -r node_modules/laravel-mix/setup/webpack.mix.js ./
 ```
-**NOTE: There is currently an [issue](https://github.com/JeffreyWay/laravel-mix/issues/924) with v1.x where paths only work if they are in the assets branch, but not outside of it**.
-To fix this we simply create an symbolic link to `../priv/static`. As soon as the issue is resolved replace `output` in the configuration below with `../priv/static`
-```bash
-$ ln -s ../priv/static outout
-```
 
 Open `webpack.mix.js` and replace the default settings with the following. You can change or add anything you want; the API is included in the file. Also check out the docs, which are hosted in the GitHub repo. 
 ```javascript
-mix.setPublicPath('output')
+mix.setPublicPath('../priv/static')
    .js('js/app.js', 'js/app.js')
    .sass('css/app.scss', 'css/app.css')
-   .copyDirectory('./static', 'output');
+   .copyDirectory('./static', '../priv/static');
 
 mix.options({
   clearConsole: false,
   processCssUrls: false
 });
 ```
+
+Add a `.babelrc` file in your assets folder to prevent babel from compiling phoenix's local npm files in `../deps` and fill it with the following:
+```json
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+          "browsers": ["> 2%"],
+          "uglify": true
+      }
+    }]
+	],
+	"ignore": [
+    "node_modules",
+    "deps"
+  ]
+}
+```
+
 If you are using the configuration above, you will need to replace `assets/css/app.css` with `assets/css/app.scss`, and you will need to import any (s)css files you want to include as they will not be automatically imported.
 
 Then you will need to update the `package.json` scripts so that it uses webpack instead of brunch.
 ```json
 {
   "scripts": {
     "deploy": "NODE_ENV=production webpack -p --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   }
 }
 ```
+
 Update `dev.exs` so that it uses these scripts. In the `Endpoint` config, replace `watchers`.
 ```elixir
 config :demo, Demo.Web.Endpoint,
-  watchers: [npm: ["run", "watch",
+  watchers: [npm: ["run", "watch", # You might replace npm with yarn
     cd: Path.expand("../assets", __DIR__)]]
 ```
 You're almost done! Just remove the auto generated `brunch-config.js` file, and the `priv/static` folder (so that the old brunch-compiled files are removed) and then run the server.

diff --git a/post.md b/post.md
@@ -27,7 +27,7 @@ To fix this we simply create an symbolic link to `../priv/static`. As soon as th
 $ ln -s ../priv/static outout
 ```
 
-Open `webpack.mix.js` and replace the default settings with the following. You can change or add anything you want; the API is included in the file.
+Open `webpack.mix.js` and replace the default settings with the following. You can change or add anything you want; the API is included in the file. Also check out the docs, which are hosted in the GitHub repo. 
 ```javascript
 mix.setPublicPath('output')
    .js('js/app.js', 'js/app.js')

diff --git a/post.md b/post.md
@@ -24,7 +24,7 @@ $ cp -r node_modules/laravel-mix/setup/webpack.mix.js ./
 **NOTE: There is currently an [issue](https://github.com/JeffreyWay/laravel-mix/issues/924) with v1.x where paths only work if they are in the assets branch, but not outside of it**.
 To fix this we simply create an symbolic link to `../priv/static`. As soon as the issue is resolved replace `output` in the configuration below with `../priv/static`
 ```bash
-ln -s ../priv/static outout
+$ ln -s ../priv/static outout
 ```
 
 Open `webpack.mix.js` and replace the default settings with the following. You can change or add anything you want; the API is included in the file.

diff --git a/post.md b/post.md
@@ -22,7 +22,7 @@ Copy the default generated laravel-mix config into your project assets directory
 $ cp -r node_modules/laravel-mix/setup/webpack.mix.js ./
 ```
 **NOTE: There is currently an [issue](https://github.com/JeffreyWay/laravel-mix/issues/924) with v1.x where paths only work if they are in the assets branch, but not outside of it**.
-To fix this we simply create an symbolic link to ../priv/static. As soon as the issue is resolved replace `output` in the configuration below with `../priv/static`
+To fix this we simply create an symbolic link to `../priv/static`. As soon as the issue is resolved replace `output` in the configuration below with `../priv/static`
 ```bash
 ln -s ../priv/static outout
 ```

diff --git a/post.md b/post.md
@@ -17,7 +17,7 @@ Remove all of the `devDependencies` in the `package.json` file. Then install `la
 $ npm install laravel-mix webpack --save-dev
 $ # or yarn add laravel-mix webpack --dev
 ```
-Copy the default generated webpack and laravel-mix configs into your project assets directory.
+Copy the default generated laravel-mix config into your project assets directory.
 ```bash
 $ cp -r node_modules/laravel-mix/setup/webpack.mix.js ./
 ```

diff --git a/post.md b/post.md
@@ -14,22 +14,29 @@ $ cd demo/assets
 ```
 Remove all of the `devDependencies` in the `package.json` file. Then install `laravel-mix` and `webpack`.
 ```bash
-$ npm install [email protected] webpack --save-dev
+$ npm install laravel-mix webpack --save-dev
+$ # or yarn add laravel-mix webpack --dev
 ```
-**NOTE: There is a bug in `0.12.0` where the JS file is moved after compilation. Use `0.11.3` for now**. Copy the default generated webpack and laravel-mix configs into your project assets directory.
+Copy the default generated webpack and laravel-mix configs into your project assets directory.
 ```bash
-$ cp -r ./node_modules/laravel-mix/setup/** ./
+$ cp -r node_modules/laravel-mix/setup/webpack.mix.js ./
 ```
+**NOTE: There is currently an [issue](https://github.com/JeffreyWay/laravel-mix/issues/924) with v1.x where paths only work if they are in the assets branch, but not outside of it**.
+To fix this we simply create an symbolic link to ../priv/static. As soon as the issue is resolved replace `output` in the configuration below with `../priv/static`
+```bash
+ln -s ../priv/static outout
+```
+
 Open `webpack.mix.js` and replace the default settings with the following. You can change or add anything you want; the API is included in the file.
 ```javascript
-mix.js('./js/app.js', './js/app.js');
-mix.sass('./css/app.scss', './css/app.css');
-mix.copyDirectory('./static', '../priv/static');
+mix.setPublicPath('output')
+   .js('js/app.js', 'js/app.js')
+   .sass('css/app.scss', 'css/app.css')
+   .copyDirectory('./static', 'output');
 
-mix.disableNotifications();
-mix.setPublicPath('../priv/static');
 mix.options({
   clearConsole: false,
+  processCssUrls: false
 });
 ```
 If you are using the configuration above, you will need to replace `assets/css/app.css` with `assets/css/app.scss`, and you will need to import any (s)css files you want to include as they will not be automatically imported.
@@ -38,8 +45,8 @@ Then you will need to update the `package.json` scripts so that it uses webpack
 ```json
 {
   "scripts": {
-    "deploy": "webpack -p",
-    "watch": "webpack --watch --colors --progress"
+    "deploy": "NODE_ENV=production webpack -p --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   }
 }
 ```

diff --git a/post.md b/post.md
@@ -1,6 +1,5 @@
 # Introduction
-> [Laravel-Mix](https://github.com/JeffreyWay/laravel-mix) provides a clean, fluent API for defining basic webpack build steps for your Laravel application. Mix supports several common CSS and JavaScript pre-processors.
-> If you've ever been confused about how to get started with module bundling and asset compilation, you will love Laravel Mix!
+[Laravel-Mix](https://github.com/JeffreyWay/laravel-mix) is "an elegant wrapper around Webpack for the 80% use case". It has nothing to do with Elixir's Mix and does not require Laravel to work!
 
 # Set up
 Create a new phoenix application with `mix phx.new`. You may choose to add the `--no-brunch` flag to stop brunch from being intiailized, but I personally prefer leaving that in and replacing brunch so that the folder structure is set up for me.

diff --git a/post.md b/post.md
@@ -3,7 +3,7 @@
 > If you've ever been confused about how to get started with module bundling and asset compilation, you will love Laravel Mix!
 
 # Set up
-Create a new phoenix application with `mix phx.new`. You may choose to add the `--no-brunch` flag to stop brunch from being intiailized, but I personally prefer leaving that in and replacing brunch so that the folder structure is set up.
+Create a new phoenix application with `mix phx.new`. You may choose to add the `--no-brunch` flag to stop brunch from being intiailized, but I personally prefer leaving that in and replacing brunch so that the folder structure is set up for me.
 ```bash
 $ mix phx.new demo
 ```
@@ -15,14 +15,13 @@ $ cd demo/assets
 ```
 Remove all of the `devDependencies` in the `package.json` file. Then install `laravel-mix` and `webpack`.
 ```bash
-$ npm install laravel-mix webpack --save-dev
+$ npm install laravel-mix@0.11.3 webpack --save-dev
 ```
-**NOTE: There is a bug in `0.12.0` where the JS file is moved after compilation. Use `0.11.3` for now**.
-Then copy the default generated webpack and laravel-mix configs into your project assets directory.
+**NOTE: There is a bug in `0.12.0` where the JS file is moved after compilation. Use `0.11.3` for now**. Copy the default generated webpack and laravel-mix configs into your project assets directory.
 ```bash
 $ cp -r ./node_modules/laravel-mix/setup/** ./
 ```
-Then open `webpack.mix.js` and replace the default settings with the following. You can change or add anything you want; the API is included in the file.
+Open `webpack.mix.js` and replace the default settings with the following. You can change or add anything you want; the API is included in the file.
 ```javascript
 mix.js('./js/app.js', './js/app.js');
 mix.sass('./css/app.scss', './css/app.css');
@@ -45,15 +44,15 @@ Then you will need to update the `package.json` scripts so that it uses webpack
   }
 }
 ```
-You should then update `dev.exs` so that it uses these scripts. In the `Endpoint` config, replace `watchers`.
+Update `dev.exs` so that it uses these scripts. In the `Endpoint` config, replace `watchers`.
 ```elixir
 config :demo, Demo.Web.Endpoint,
   watchers: [npm: ["run", "watch",
     cd: Path.expand("../assets", __DIR__)]]
 ```
-You're almost done! Just remove the autogenerated `brunch-config.js` file, and the `priv/static` folder (so that the old brunch-compiled files are removed) and then run the server.
+You're almost done! Just remove the auto generated `brunch-config.js` file, and the `priv/static` folder (so that the old brunch-compiled files are removed) and then run the server.
 ```bash
 $ mix phx.server
 ```
 
-You're done! Hope you enjoy using the much simpler, yet more powerful laravel-mix.
+You're done! Hope you enjoy using the much simpler, yet more powerful: laravel-mix.
diff --git a/post.md b/post.md
@@ -17,7 +17,43 @@ Remove all of the `devDependencies` in the `package.json` file. Then install `la
 ```bash
 $ npm install laravel-mix webpack --save-dev
 ```
+**NOTE: There is a bug in `0.12.0` where the JS file is moved after compilation. Use `0.11.3` for now**.
 Then copy the default generated webpack and laravel-mix configs into your project assets directory.
 ```bash
 $ cp -r ./node_modules/laravel-mix/setup/** ./
-```
+```
+Then open `webpack.mix.js` and replace the default settings with the following. You can change or add anything you want; the API is included in the file.
+```javascript
+mix.js('./js/app.js', './js/app.js');
+mix.sass('./css/app.scss', './css/app.css');
+mix.copyDirectory('./static', '../priv/static');
+
+mix.disableNotifications();
+mix.setPublicPath('../priv/static');
+mix.options({
+  clearConsole: false,
+});
+```
+If you are using the configuration above, you will need to replace `assets/css/app.css` with `assets/css/app.scss`, and you will need to import any (s)css files you want to include as they will not be automatically imported.
+
+Then you will need to update the `package.json` scripts so that it uses webpack instead of brunch.
+```json
+{
+  "scripts": {
+    "deploy": "webpack -p",
+    "watch": "webpack --watch --colors --progress"
+  }
+}
+```
+You should then update `dev.exs` so that it uses these scripts. In the `Endpoint` config, replace `watchers`.
+```elixir
+config :demo, Demo.Web.Endpoint,
+  watchers: [npm: ["run", "watch",
+    cd: Path.expand("../assets", __DIR__)]]
+```
+You're almost done! Just remove the autogenerated `brunch-config.js` file, and the `priv/static` folder (so that the old brunch-compiled files are removed) and then run the server.
+```bash
+$ mix phx.server
+```
+
+You're done! Hope you enjoy using the much simpler, yet more powerful laravel-mix.
diff --git a/post.md b/post.md
@@ -0,0 +1,23 @@
+# Introduction
+> [Laravel-Mix](https://github.com/JeffreyWay/laravel-mix) provides a clean, fluent API for defining basic webpack build steps for your Laravel application. Mix supports several common CSS and JavaScript pre-processors.
+> If you've ever been confused about how to get started with module bundling and asset compilation, you will love Laravel Mix!
+
+# Set up
+Create a new phoenix application with `mix phx.new`. You may choose to add the `--no-brunch` flag to stop brunch from being intiailized, but I personally prefer leaving that in and replacing brunch so that the folder structure is set up.
+```bash
+$ mix phx.new demo
+```
+
+# Install Laravel-Mix
+`cd` into your project.
+```bash
+$ cd demo/assets
+```
+Remove all of the `devDependencies` in the `package.json` file. Then install `laravel-mix` and `webpack`.
+```bash
+$ npm install laravel-mix webpack --save-dev
+```
+Then copy the default generated webpack and laravel-mix configs into your project assets directory.
+```bash
+$ cp -r ./node_modules/laravel-mix/setup/** ./
+```
No results found