Along with backend API's, artisan commands & all other stuff, if you have frontend built within Laravel application then for sure you will need some sort of CSS pre-processor & something to compile and bundle your assets.
Laravel mix comes handy for these cases for your Laravel application. Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. Through simple method chaining, you can fluently define your asset pipeline. In simple words, Laravel Mix is a configuration layer on top of Webpack.
Here is the official documentation.
For example:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
You will love laravel mix if you are new to the webpack & you wanted to use bundling and asset compilation.
Before triggering Mix, you must first ensure that Node.js and NPM are installed on your machine.(Laravel Homestead includes everything you need be default)
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. You just have to run npm install
.
To run your Mix tasks you only need to execute one of the NPM scripts that is included with the default Laravel package.json
file:
<span class="hljs-regexp">// Run all Mix tasks...
npm run dev
<span class="hljs-regexp">// Run all Mix tasks and minify output...
npm run production
The 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 watch-poll command:
npm run watch-poll
The webpack.mix.js
file is your entry point for all asset compilation. Think of it as a light configuration wrapper around Webpack. Mix tasks can be chained together to define exactly how your assets should be compiled.
The less
method may be used to compile Less into CSS. Let's compile our primary app.less
file to public/css/app.css
.
mix.less('resources/less/app.less', 'public/css');
Multiple calls to the less
method may be used to compile multiple files:
mix.less('resources/less/app.less', 'public/css')
.less('resources/less/admin.less', 'public/css');
If you wish to customize the file name of the compiled CSS, you may pass a full file path as the second argument to the less
method:
mix.less('resources/less/app.less', 'public/stylesheets/styles.css');
The sass
method allows you to compile Sass
into CSS. You may use the method like so:
mix.sass('resources/sass/app.scss', 'public/css');
Similar to Less and Sass, the stylus
method allows you to compile Stylus
into CSS:
mix.stylus('resources/stylus/app.styl', 'public/css');
If you would just like to concatenate some plain CSS stylesheets into a single file, you may use the styles
method.
Laravel mix provides several features to help you work with your JavaScript files, such as compiling ECMAScript 2015, module bundling, minification, and concatenating plain JavaScript files. Even better, this all works seamlessly, without requiring an ounce of custom configuration:
mix.js('resources/js/app.js', 'public/js');
With this single line of code, you may now take advantage of:
.vue
files.One potential downside to bundling all application-specific JavaScript with your vendor libraries is that it makes long-term caching more difficult. For example, a single update to your application code will force the browser to re-download all of your vendor libraries even if they haven't changed.
If you intend to make frequent updates to your application's JavaScript, you should consider extracting all of your vendor libraries into their own file. This way, a change to your application code will not affect the caching of your large vendor.js
file. Mix's extract
method makes this a breeze:
mix.js('resources/js/app.js', 'public/js')
.extract(['vue'])
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/mainfest.js
: The Webpack manifest runtimepublic/js/vendor.js
: Your vendor librariespublic/js/app.js
: Your application codeYou may inject environment variables into Mix by prefixing a key in your .env
file with MIX_
:
MIX_SENTRY_DSN_PUBLIC=http://example.com
After the variable has been defined in your .env
file, you may access via the process.env
object. If the value changes while you are running a watch
task, you will need to restart the task:
process.env.MIX_SENTRY_DSN_PUBLIC
You can modify webpack.config.js
file for changes in your configurations.