Assets

This document explains how to compile assets in WP Bones using Gulp. It covers the installation of necessary packages, the package.json scripts for building and watching assets, and the structure of source and compiled assets. It also provides guidance on modifying the gulpfile.js and references additional resources for creating complex ReactJS components or applications.

Overview

WP Bones uses Gulp  to compile and copy assets from resources/assets to public. It supports:

• CSS (Less, Sass)
• JavaScript (ES6, TypeScript)
• React

Installation

To compile the assets, you need to install the packages and dependencies:

npm install

pnpm install

yarn install

bun install

Package.json

The package.json file contains the scripts to compile the assets.

{
  "scripts": {
    "start": "gulp watch",
    "build": "gulp build"
  },
}

Now you can compile the assets by running:

npm run build

pnpm run build

yarn build

bun run build

To compile the assets during development, run:

npm run start

pnpm run start

yarn run start

bun run start

All the assets in resources/assets are compiled and copied to the public folder.

Your development source assets:

• resources
  • assets
    • css
      • my-styles-1.lessless
      • my-styles-2.scssSass
    • js
      • my-script.jsJavaScript
      • my-hook.tsTypescript
      • my-react-component.jsxReact

Will be compiled and copied to the public folder:

• public
  • css
    • my-styles-1.cssCSS
    • my-styles-2.cssCSS
  • js
    • my-script.jsJavaScript
    • my-hook.jsJavaScript
    • my-react-component.jsReact

Gulpfile.js

The gulpfile.js in the root folder contains the tasks to compile the assets. Feel free to modify the tasks to fit your needs.

More complex ReactJS components or applications

If you need to create more complex ReactJS components or applications, check out the ReactJS Components section and the ReactJS Applications section.