Laravel 5: JS/CSS – MIX compiling assets

JS/CSS: compiling assets

This tool will make minifying, concatenating, compiling web assets a breeze.

Check if all tools are in place and ready
Is node and npm ready?

Run in console to get dependencies:

Compiling commands
run all mix tasks – development mode (no minification)

run all mix tasks and minify output…

ALWAYS run this for production

run live update of changes to asset files

Two commands above this one always compile webpack modules, so it takes a bit time and resources.
So, if you are making adjustments to your js/css files, it is better to compile webpack once and then allow mix to update changes only quickly, anytime you make such change.

It is much faster, but it does not work if:

  • you make any change to webpack.mix.js file
  • you are using combine() or copy() method
Mix / webpack setup commands

Most of commands mentioned below may be chained to mix var, e.g. like this:

Lets take a look at commands.

Tell mix where main js file resides and which dir it compiles into

Tell mix where sass file resides and which dir it compiles into

Use non-sass css files

If by any change you use also some non-sass css files, you may use command copy().
It should not be used with combine().
note:
This command does not work with: npm run watch as webpack must be re-compiled, so use:
npm run dev OR npm run production

New file will be imported into app.css, if you import it into app.scss:

Of course, you can pull them by hand, but then, you may not get versioning.

Use multiple non-css files and concatenate them into one
If you have more than one stylesheet and you want to move them to ‘public’ folder, and concatenate, and minimize them at the same time use combine() method instead of copy().
This method should not be used with copy() together, but it is up to your app needs.
Webpack must be re-compiled for this to take effect.

New file will be imported into app.css:

Extra debugging info can be accessed by using sourceMap()

It slows down compilation process.

To bust cache, version your css/js files

Browsers are cheaters.
They hold on to cached versions of css and js files like a drunk to a lamp post.
Versioning help to force browser to download latest version of js/css file.

Selective versioning

You may run version(), only when running command npm run production.

Above code will allow versioning only if you use ‘production’ suffix.

Of course, you cannot chain this.

Outputting versioned file into HTTP

Use new helper function mix(), to output latest versioned files automatically:

Make mix working faster, if some code is re-coded often

If you intend to make frequent updates to your application’s JavaScript, you should consider extracting all of your vendor libraries into their file.
The extract method accepts an array of all libraries or modules that you wish to extract into a vendor.js file.
Using the above snippet as an example, Mix will generate the following files:

  • public/js/manifest.js: The Webpack manifest runtime
  • public/js/vendor.js: Your vendor libraries
  • public/js/app.js: Your application code

To avoid JavaScript errors, be sure to load these files in the proper order:

  1. <script src=”/js/manifest.js”></script>
  2. <script src=”/js/vendor.js”></script>
  3. <script src=”/js/app.js”></script>

This requires webpack re-compilation.

Add extra JS files to be compiled by Mix
Just require this file in resources\assets\js\app.js right under: require(‘./bootstrap’);
like this: require(‘./jp’);
./jp‘ is a path to a js file – I placed it in same dir as app.js: resources\assets\js\jp.js

This way your new file will be auto-compiled my mix.

Vue dev console warning

This warning:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html app.js:37937
Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools

… will disappear, when you you run production compilation: