Compiling Assets (Laravel Mix)
mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');
If you've ever been confused and overwhelmed about getting started with Webpack and asset compilation, you will love Laravel Mix. However, you are not required to use it while developing your application. Of course, you are free to use any asset pipeline tool you wish, or even none at all.
Installation & Setup
Before triggering Mix, you must first ensure that Node.js and NPM are installed on your machine.
node -v npm -v
By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install the latest version of Node and NPM using simple graphical installers from their download page.
The only remaining step is to install Laravel Mix. Within a fresh installation of Laravel, you'll find a
package.json file in the root of your directory structure. The default
package.json file includes everything you need to get started. Think of this like your
composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
Mix is a configuration layer on top of Webpack, so to run your Mix tasks you only need to execute one of the NPM scripts that is included with the default Laravel
// Run all Mix tasks... npm run dev // Run all Mix tasks and minify output... npm run production
Watching Assets For Changes
npm run watch command will continue running in your terminal and watch all relevant files for changes. Webpack will then automatically recompile your assets when it detects a change:
npm run watch
You may find that in certain environments Webpack isn't updating when your files change. If this is the case on your system, consider using the
npm run watch-poll