Description

WordPress plugin for My Allocator channel manager

Features

• Sass for stylesheets
• ES6 for JavaScript
• Webpack for compiling assets, optimizing images, and concatenating and minifying files
• Browsersync for synchronized browser testing

Requirements

Make sure all dependencies have been installed before moving on:

• WordPress >= 4.7
• PHP >= 5.6.4
• Composer
• Node.js >= 6.9.x
• Yarn

Plugin Installation

Fork or clone repository in your local dir

• yarn — navigate to the plugin directory and run yarn
• composer install — Install composer dependencies
• yarn run build - Initial build
• yarn run start - 'Watch'

Install dependencies

From the command line on your host machine (not on your Vagrant development box), navigate to the theme directory then run yarn:

# @ wp-plugins/your-plugin-name/
$ yarn

You now have all the necessary dependencies to run the build process.

Build commands

• yarn run start — Compile assets when file changes are made, start Browsersync session
• yarn run build — Compile and optimize the files in your assets directory
• yarn run build:production — Compile assets for production

Additional commands

• yarn run rmdist — Remove your dist/ folder
• yarn run lint — Run ESLint against your assets and build scripts
• composer test — Check your PHP for PSR-2 compliance with phpcs

Using Browsersync

To use Browsersync you need to update devUrl at the bottom of assets/config.json to reflect your local development hostname.

If your local development URL is https://project-name.dev, update the file to read:

...
  "devUrl": "https://project-name.dev",
...

If you are not using Bedrock, update publicPath to reflect your folder structure:

...
  "publicPath": "/wp-plugins/plugin-name/"
...

By default, Browsersync will use webpack's HMR, which won't trigger a page reload in your browser.

If you would like to force Browsersync to reload the page whenever certain file types are edited, then add them to watch in assets/config.json.

...
  "watch": [
    "assets/scripts/**/*.js",
    "templates/**/*.php",
    "src/**/*.php"
  ],
...