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

Deploy

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

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