Intro

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

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

See also

JS and SCSS

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

package.json

  "scripts": {
    "server": "npx nf start",
    "build:dev": "webpack --env NODE_ENV=development",
    "build:prod": "yarn sign-release && webpack --env NODE_ENV=production",
    "clean:js": "rimraf dist/javascripts/*",
    "clean:css": "rimraf dist/stylesheets/*",
    "clean:images": "rimraf dist/images/*",
    "clean:dist": "yarn clean:js && yarn clean:css && yarn clean:images",
    "sign-release": "git rev-parse HEAD | cut -c 1-8 > release.txt",
    "lint": "yarn lint:sass",
    "lint:sass": "npx stylelint 'src/stylesheets/**/*.scss'",
    "test:db:create": "WP_ENV=test wp db create",

It is expected - but it’s still up to you - that before every build you will clean the compiled files. yarn clean:dist will do the cleanup.

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