Winter brings first-class support for handling Node-based compilation for frontend assets through the Mix commands. The comamnds use the Laravel Mix wrapper, a user-friendly and simple interface for setting up compilation of multiple types of frontend assets through Webpack and various libraries.
To take advantage of Mix asset compilation, you must have Node and the Node package manager (NPM) installed in your development environment. This will be dependent on your operating system - please review the Download NodeJS page for more information on installing Node.
Laravel Mix should also be present in the package.json file for any packages that will be using it (either in dependencies or a devDependencies) but if it is not specified in the project's package.json file then it can be optionally automatically added when running the mix:install command.
Registering for asset compilation through Mix is very easy. Automatic registration should meet your needs most of the time, and if not there are several methods available to manually register Mix packages.
By default, Winter will scan all available and enabled modules, plugins and themes for the presence of a winter.mix.js file under each extension's root folder (i.e. modules/system/winter.mix.js, plugins/myauthor/myplugin/winter.mix.js, or themes/mytheme/winter.mix.js).
If the winter.mix.js file is found, it will be automatically registered as a package with an automatically generated package name, and will show up when running the Mix commands. Most of the time, this should be all you need to do in order to get started with Laravel Mix asset compilation in Winter CMS.
To register frontend assets to be compiled through Mix in your plugin, simply return an array with the package names as the keys and the package paths relative to the plugin's directory as the values to register from your Plugin.php registration file's registerMixPackages() method. See below example.
public function registerMixPackages()
{
return [
'custom-package-name' => 'assets/js/build.mix.js',
];
}Registration of asset compilation of themes is even easier, and can be done by adding a mix definition to your theme information file (theme.yaml).
name: "Winter CMS Demo"
description: "Demonstrates the basic concepts of the frontend theming."
author: "Winter CMS"
homepage: "https://wintercms.com"
code: "demo"
mix:
<name of package>: winter.mix.jsThe mix definition takes any number of registered packages as a YAML object, with the key being the name of the package as a kebab-case string and the location of your winter.mix.js file relative to the theme's root directory.
For example, if you want to register two packages called demo-theme-style and demo-theme-shop located in the assets folder, you would use the following definition:
name: "Winter CMS Demo"
description: "Demonstrates the basic concepts of the frontend theming."
author: "Winter CMS"
homepage: "https://wintercms.com"
code: "demo"
mix:
demo-theme-style: assets/style/winter.mix.js
demo-theme-shop: assets/shop/winter.mix.jsThe Mix configuration file (winter.mix.js) is a configuration file that manages the configuration of Laravel Mix itself. In conjunction with the package.json file that defines your dependencies, this file defines how Laravel Mix will compile your assets.
You can review examples or the full Mix API at the Laravel Mix website.
Your winter.mix.js file must include Mix as a requirement, and must also define the public path to the current directory, as follows:
const mix = require('laravel-mix');
// For assets in the current directory
// mix.setPublicPath(__dirname);
// For assets in a /assets subdirectory
mix.setPublicPath(__dirname + '/assets');
// Your mix configuration belowWhen the winter.mix.js file is evaluated, regardless of where you ran mix:compile from, the working directory is set to the parent directory of the winter.mix.js file. That means that any relative paths used in the configuration will be relative to the current directory of the winter.mix.js file.
NOTE: Winter's path symbols are also supported in the
winter.mix.jsfile.
Here are some examples of installing common frontend libraries for use with the asset compilation.
For themes that wish to use Tailwind CSS, include the tailwindcss, postcss and autoprefixer dependencies in your package.json file.
# Inside the project root folder
npm install --save-dev tailwindcss postcss autoprefixer
# Run the Tailwind initialisation
npx tailwindcss initThis will create a Tailwind configuration file (tailwind.config.js) inside your theme that you may configure to your specific theme's needs.
Then, add a winter.mix.js configuration file that will compile Tailwind as needed:
const mix = require('laravel-mix');
mix.setPublicPath(__dirname);
// Render Tailwind style
mix.postCss('assets/css/base.css', 'assets/css/theme.css', [
require('postcss-import'),
require('tailwindcss'),
]);In the example above, we have a base CSS file that contains the Tailwind styling - assets/css/base.css - that will compile to a final compiled CSS file in assets/css/theme.css.
Your theme will now be ready for Tailwind CSS development.
php artisan mix:install [-p <package name>] [--npm <path to npm>]The mix:install command will install Node dependencies for all registered Mix packages.
This command will add each registered package to the workspaces.packages property of your root package.json file and then run and display the results of npm install from your project root to install all of the dependencies for all of the registered packages at once.
You can optionally provide a -p or --package flag to install dependencies for one or more packages. To define multiple packages, simply add more -p flags to the end of the command.
If the command is run with a -p or --package flag and the provided package name is not already registered and the name matches a valid module, plugin, or theme package name (modules are prefixed with module-$moduleDirectory, themes are prefixed with theme-$themeDirectory, and plugins are simply Author.Plugin) then a winter.mix.js file will be automatically generated for that package and will be included in future runs of any mix commands through the automatic registration feature.
The --npm flag can also be provided if you have a custom path to the npm program. If this is not provided, the system will try to guess where npm is located.
php artisan mix:listThe mix:list command will list all registered Mix packages found in the Winter installation. This is useful for determining if your plugin or theme is correctly registered.
The command will list all packages, as well as the directory for the asset and the configuration file that has been defined during registration.
php artisan mix:compile [-p <package name>] [-f|--production] [-- <extra build options>]The mix:compile command compiles all registered Mix packages, running each package through Laravel Mix for compilation.
By specifying the -p flag, you can compile one or more selected packages. To define multiple packages, simply add more -p flags to the end of the command.
By default, all packages are built in "development" mode. If you wish to compile in "production" mode, which may include more optimisations for production sites, add the -f or --production flag to the command.
The command will generate a report of all compiled files and their final size once complete.
If you wish to pass extra options to the Webpack CLI, for special cases of compilation, you can add -- to the end of the command, followed by any parameters as per the Webpack CLI options.
php artisan mix:watch <package> [-f|--production] [-- <extra build options>]The mix:watch command is similar to the the mix:compile command, except that it remains active and watches for any changes made to files that would be affected by your compilation. When any changes are made, a compile is automatically executed. This is useful for development in allowing you to quickly make changes and review them in your browser.
With this command, only one package can be provided and watched at any one time.