|
| 1 | +# Concatenation and Minification |
| 2 | + |
| 3 | +```js |
| 4 | +mix.combine(['src', 'files'], 'destination'); |
| 5 | +mix.babel(['src', 'files'], destination); |
| 6 | +mix.minify('src'); |
| 7 | +mix.minify(['src']); |
| 8 | +``` |
| 9 | + |
| 10 | +If used properly, Laravel Mix and webpack should take care of all the necessary module bundling and minification for you. However, you may have some legacy code or vendor libraries that need to be concatenated and minified. Not a problem. |
| 11 | + |
| 12 | +### Combine Files |
| 13 | + |
| 14 | +Consider the following snippet: |
| 15 | + |
| 16 | +```js |
| 17 | +mix.combine(['one.js', 'two.js'], 'merged.js'); |
| 18 | +``` |
| 19 | + |
| 20 | +This will naturally merge `one.js` and `two.js` into a single file, called `merged.js`. As always, during development, that merged file will remain uncompressed. However, for production \(`export NODE_ENV=production`\), this command will additionally minify `merged.js`. |
| 21 | + |
| 22 | +#### Combine Files With Babel Compilation |
| 23 | + |
| 24 | +If you need to concatenate JavaScript files that have been written in ES2015, you may update your `mix.combine()` call to `mix.babel()`. The method signature is identical. The only difference is that, after the files have been concatenated, Laravel Mix will perform Babel compilation on the result to transform the code to vanilla JavaScript that all browsers can understand. |
| 25 | + |
| 26 | +```js |
| 27 | +mix.babel(['one.js', 'two.js'], 'merged.js'); |
| 28 | +``` |
| 29 | + |
| 30 | +### Minify Files |
| 31 | + |
| 32 | +Similarly, you may also minify one or more files with the `mix.minify()` command. |
| 33 | + |
| 34 | +```js |
| 35 | +mix.minify('path/to/file.js'); |
| 36 | +mix.minify(['this/one.js', 'and/this/one.js']); |
| 37 | +``` |
| 38 | + |
| 39 | +There are a few things worth noting here: |
| 40 | + |
| 41 | +1. This method will create a companion `*.min.ext` file. So minifying `app.js` will generate `app.min.js`. |
| 42 | +2. Once again, the minification will only take place during a production build. \(`export NODE_ENV=production`\). |
| 43 | +3. There is no need to call `mix.combine(['one.js', 'two.js'], 'merged.js').minify('merged.js');`Just stick with the single `mix.combine()` call. It'll take care of both. |
| 44 | + |
| 45 | +> **Important**: Please note that minification is only available for CSS and JavaScript files. The minifier will not understand any other provided file type. |
0 commit comments