Build and distribution

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

The most widespread folder naming approach to distinguish between source and built code are src and dst, but Wordless has different naming due to its backward compatibility effort.

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

See also

CoffeeScript and Sass

We offer standard approaches for both 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 it’s still up to you - that before every build you will clean the 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 must, PHUG ships a built-in Optimizer. You can read about it in the phug documentation:

The Optimizer is a tool that avoids loading the Phug engine if a file is available in the cache. On the other hand, 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 your system supports it) 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 is either production or staging.

Note

Arbitrary values are not supported.

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

:caption: wp-config.php

<?php
define('ENVIRONMENT', 'production');

Deploy

Wordless is agnostic about the deploy strategy. Our favourite product for deploying WordPress is Wordmove.

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