Build Process

This theme utilizes Laravel Mix for most of the build process with the theme.

Laravel Mix is a layer built on top of Webpack that makes defining your build process much easier than attempting to write out a custom webpack.config.js configuration file. It simplifies most of the complexity while still allowing you to define custom Webpack config options for more advanced uses.

You may configure the build process to your liking by editing webpack.mix.js.

The following is a list of commands you can run from the command line:

# Builds the entire theme ready for packaging for output.
# This command runs through the below `prod`, `i18n`, and `export` commands.
npm run build

# Processes all of your assets for a development environment.
npm run dev

# Processes all of your assets for a production environment.
npm run prod

# Watches for changes to any files and rebuilds for a development environment.
npm run watch

# Watches for changes to any files and rebuilds for a development environment.
# Also uses BrowserSync to auto-sync changes directly to the browser.
npm run watch:sync

# Hot Reloading refreshes the page when a JS component changes. It also maintains
# the current state of the component.
npm run hot

# Exports a copy of your theme for distribution.
npm run export

# Lint JavaScript, SCSS, and PHP files.
npm run lint
npm run lint:php
npm run lint:styles
npm run lint:scripts

# Auto-adds a textdomain and/or creates a POT file.
npm run i18n
npm run i18n:textdomain
npm run i18n:pot

# Rename the theme, slugs, namespace and more.
npm run rename

Preparing your theme for release

Whether you're going to upload to a site via FTP or create a ZIP to for users to download, you'll want to have all the files you need neatly packaged for production. Mythic has the tools for this, but you'll want to follow a specific order to get everything right.

Before beginning, make sure to navigate to your theme folder via the command line to make sure you're in the right place.

cd path/to/wp-content/themes/your-theme

Step 1: Switch Composer to production

You need to switch your Composer files to production, rather than development. This will remove files that you don't need in a production environment.

composer update --prefer-dist --no-dev

Step 2: Build theme

The build process is a combination of commands run in the following order:

• prod - Creates the production-ready assets for your theme.
• i18n - Adds textdomains and creates a POT file.
• export - Creates a /<theme-slug> folder in your theme for distribution.

You can run those manually or simply run:

npm run build

From this point, you can create a ZIP folder with the zipping utility on your computer or simply upload the files to a site.

Step 3: Switch Composer back to dev

Note that you changed your Composer environment to production in Step 1. You'll likely want to switch it back to development at some point. To do so, you simply run the following command:

composer update