Learn how to use Mix, the Laravel tool to compile the frontend assets of web applications, easily compiling, transpiling and minifying Javascript and CSS code.
Laravel is a Backend framework but it also offers us excellent tools to work with the frontend part, since a fundamental part of any web application is Javascript and CSS. In modern applications, a large amount of frontend code is handled and sometimes managing the correct generation and optimization of assets is not an easy task. For this reason, in Laravel they offer us a tool called “Mix” to carry out all the Operation related to the compilation and transpilation of the frontend codethat is, the CSS and the javascript.
Basically Mix works with Webpack underneath, it just lets you forget about all its configuration and usage complexities. With a very simple code, Mix allows you to perform the operations that are usually done with Webpack in most applications. In this article we are going to teach you how to use its main Mix functions within the context of Laravel.
Laravel Mix appeared starting with Laravel 5.4, to replace Laravel Elixir. Also, given Laravel’s philosophy of offering a whole decoupled stack of utilities, this tool can be used independently of the framework. That is, it is fully integrated with Laravel, but we could also use it in any other project that requires working with Javascript and CSS.
Install Laravel Mix
Actually Mix is already activated when we create a new Laravel project, so we don’t need to do anything special to be able to use it.
The only thing you need to make sure is that the frontend dependencies have been installed, which are managed by npm.
npm is the dependency manager for , something like it is for PHP.
To make sure that we have the dependencies installed, it is necessary to perform these two steps:
1.- Install NodeJS
NodeJS installation is required on the development computer, you don’t need it on the production server.
To install Node you have to do the operation that your operating system requires. If it is Windows it is to execute a simple installer, if it is Linux you will have to execute a command and if it is Mac you have several alternatives. Among all the possibilities, it is best to install it through nvm, but to clarify all the installation alternatives in any operating system, the most appropriate thing is to read the article about .
2.- Install the dependencies via npm
Once a Laravel project is started, the Javascript dependencies are stored in a file called package.json. These dependencies are specified in the package.json file provided by Laravel, already created, but not installed.
Similarly, if you restore a Laravel project that you checked out from a Git repository, you will need to install the frontend dependencies.
In both situations we do it via npm, with this command:
npm install
Run Laravel Mix
Now, once you have your dependencies installed, you can run Mix with the available npm script commands.
The npm scripts are also specified within the package.json file. In that file you will see a property called “scripts” which contains a series of available commands. You will see something similar to this image.
Each of those commands are run from the console with “npm run” followed by the name of the command you want to run.
This is the command to run the build of the frontend files in “development” mode.
npm run dev
This command is used to compile the frontend files for production:
npm runprod
The files in “development” mode that you generate with “npm run dev” are larger files, but faster to generate and allow you to better locate possible errors in the js or css code. The ideal is to always compile for development, except when you are going to publish a new version of the project, in which case it is very important that you compile the assets for production.
This command is used to compile the files with live reload, that is, the files will be recompiled, in development mode, every time changes are saved to them.
npm runwatch
Also, if your development environment is not able to detect the changes, there is another command you can use:
npm run watch-poll
Location of compiled files
Once these commands are launched, you will find the compiled frontend files saved in the “public” folder of your Laravel project. Within this folder the files are stored in different subfolders,
- “public/js” for the Javascript file.
- “public/css” for the CSS file.
But these locations can be altered if you wish. To do this you simply have to edit the Mix configuration file, which you find in the root folder of the project with the name “webpack.mix.js“.
That file is where you can change any behavior and configuration of Laravel Mix. In a new Laravel project contains this code:
mix.js(‘resources/js/app.js’, ‘public/js’) .postCss(‘resources/css/app.css’, ‘public/css’, );
As you can see, the paths of the produced files are perfectly declared in the code above, so it’s very easy to customize those values to whatever you need.
How to make javascript source files
In the “webpack.mix.js” file you also find the paths of the Javascript files to be compiled. At first you find a single Javascript file path that you are going to compile: “resources/js/app.js”.
That is the root file of your Javascript, where you have all the code that will be inserted in your js bundle. However, the normal thing is that you organize your Javascript code by independent files, to facilitate maintenance, so that from “resources/js/app.js” you will do the corresponding “imports” that are necessary.
In fact, if you open the file “resources/js/app.js” you will find that it has the following code:
require(‘./bootstrap’);
That line of code means that the file “./bootstrap.js” is being imported. You can put all the require you need for your project.
Javascript file import types
Just a clarification for those who need it. In Javascript up to 3 ways to import files, although for Laravel developers we are interested in two:
- There is a let’s say “official” way, the , which is included with the Javascript “import” statement.
- There is a way prior to ES6 modules that is the classic NodeJS way, called CommonJS, which is done with the .
You can use both ways in a Javascript file of your project, since the Javascript compilation process is capable of interpreting both statements correctly.
Sometimes it depends on what you want to import, you have to do it with the import or with the require for it to work, because it depends on how the library you are importing has been written. Sometimes it’s a bit messy, but over time you get used to dealing with this situation. Older Javascript libraries generally work fine if you import them with require. In your own Javascript code, I recommend working with the import of the ES6 modules, for having a more standards-compliant Javascript.
Source maps in Mix
It is important that you use sourcemaps when working with Javascript, to make it easier to find errors in the code, when compiling the Javascript in development mode.
The sourcemaps, among other things, are used so that, when you get an error in Javascript, the line number that appears in the error is the same as the one you have in your own Javascript file and not in the compiled files. If you don’t use sourceMaps, the errors will appear in other line numbers and in the already compiled file, so it would be difficult to interpret what is happening.
In order for the source maps to be generated you have to chain the sourceMaps() method, like this:
mix.js(‘resources/js/app.js’, ‘public/js’) .sourceMaps();
Working with CSS and Laravel Mix
Mix is prepared to work with various CSS tools. Currently Laravel has turned to working with , so the initial configuration is designed to compile your CSS using .
Tailwind CSS uses PostCSS to generate the CSS your project requires, so Laravel brings PostCSS right out of the box. But PostCSS is so much more… it’s actually a huge set of tools to transform your CSS. However, in order for you to use Tailwind you will need to install it yourself. However, remember that you can install whatever you need or want, not necessarily Tailwind CSS.
If your code inside “webpack.mix.js” you leave it as is, without any special PostCSS configuration, such that it appears in a new Laravel project, or simply omitting the third parameter of the postCss() method:
mix.js(‘resources/js/app.js’, ‘public/js’) .postCss(‘resources/css/app.css’, ‘public/css’);
Then your CSS will be compiled with a simple but quite useful configuration, doing these two effects:
- The unification of all the CSS files that you have separately and perform their @import.
- The minification of the CSS code.
Tailwind CSS in Laravel Mix
Using Tailwind CSS is easy, but it requires you to learn a number of things that are explained in the .
From the Laravel Mix point of view, you should know that all PostCSS plugins are loaded from the array that you pass as the third parameter in the postCSS() method.
mix.js(‘resources/js/app.js’, ‘public/js’) .postCss(‘resources/css/app.css’, ‘public/css’, );
For this code to work, you will have to have installed Tailwind and created the file tailwind.config.js, as we have explained in the aforementioned manual.
Using Sass with Laravel Mix
In the case that you want to use Sass, it is also very simple thanks to Mix. In this case you will simply call the mix.sass() method instead of mix.postCss().
mix.sass(‘resources/sass/app.scss’, ‘public/css’);
It doesn’t make much sense to use Sass and PostCSS at the same time, since their functionality overlaps a lot. You could also achieve this by compiling with mix.sass and then using the chained options() method, where you could indicate that you want to process Tailwind next. You can look for a tutorial on the Internet that explains it to you. We are not going to go into this topic because it seems unproductive to us.
conclusion
We have learned the basics of working with Laravel Mix in common Laravel applications. From here you can still make more advanced configurations that solve specific needs of large projects, where you may need several Javascript bundles. Mix makes things much easier, if you need it.
The documentation is very complete on the Laravel site. There’s even a , where you’ll learn many other even more advanced settings.
Facebook Comments
Disqus