Build and distribution

Since Wordless is using Webpack, we have to manage build and distribution strategies for dev and staging/production.

Most spread folder naming to distinguish between source and built code are src and dst, but Wordless has different naming due to backword compatibility effort.

Source assets’ code is placed in theme/assets/{javascripts|stylesheets|images}, while built/optimized code is placed - automatically by Webpack - in assets/{javascripts|stylesheets|images}

We offer standard approarches for both the environments. They are handled - as expected - through package.json ‘s scripts [1]:

package.json
  "scripts": {
    "server": "nf start",
    "build:dev": "webpack --debug --env.WL_ENV=development",
    "build:prod": "webpack -p --bail --env.WL_ENV=production",
    "clean:js": "rimraf assets/javascripts/**.js assets/javascripts/**.map",
    "clean:css": "rimraf assets/stylesheets/**.css assets/stylesheets/**.map",
    "clean:images": "rimraf assets/images/**.{png,gif,jpg,svg}",
    "clean:dist": "yarn clean:js && yarn clean:css && yarn clean:images"
  },

It is expected - but up to you - that before every build you will clean compiled files

Build for development

yarn clean:dist && yarn build:dev

Build for production

yarn clean:dist && yarn build:prod

Production build will essentially

  • enable Webpack’s production mode
  • do not produce source maps
  • do minimize assets

PHUG optimizer

When performance is a goal, PHUG ships a built-in Optimizer. You can read about it in the phug documentation:

The Optimizer is a tool that avoid to load the Phug engine if a file is available in the cache. In counterpart, it does not allow to change the adapter or user post-render events.

Wordless supports enabling this important optimization by setting an environment variable (in any way supported by your system) or a global constant to be defined in wp-config.php. Let’s see this Wordless’ internal code snippet:

render_helper.php
                    if ( getenv('ENVIRONMENT') ) {
                        $env = getenv('ENVIRONMENT');
                    } elseif ( defined('ENVIRONMENT') ) {
                        $env = ENVIRONMENT;
                    } else {
                        $env = 'development';
                    }
                    if ( in_array( $env, array('staging', 'production') ) ) {
                        \Phug\Optimizer::call(
                            'displayFile', [$template_path, $locals], WordlessPugOptions::get_options()

where we search for ENVIRONMENT and thus we’ll activate PHUG’s Optimizer if the value will be production or staging.

Note

Arbitrary values are not supported.

The simplest approach is to to define a constant inside wp-config.php.

wp-config.php
<?php
define('ENVIRONMENT', 'production');

Deploy

Wordless is agnostic about deploy strategy. Our favourite product to deploy WordPress is Wordmove.

[1]https://docs.npmjs.com/files/package.json#scripts