Assets
Overview
WP Bones uses Gulp to compile and copy the assets from the resources/assets
folder to the public
folder. It supports:
- CSS (Less, Sass)
- Javascript (ES6, Typescript)
- ReactJS
Installation
To compile the assets, you need to install the packages and dependencies:
npm 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
To compile the assets during development, run:
npm run start
All the assets in resources/assets
are compiled and copied to the public
folder.
Your development source assets:
- my-styles-1.less
less
- my-styles-2.scss
Sass
- my-script.js
Javascript
- my-hook.ts
Typescript
- my-react-component.jsx
ReactJS
Will be compiled and copied to the public
folder:
- my-styles-1.css
CSS
- my-styles-2.css
CSS
- my-script.js
Javascript
- my-hook.js
Javascript
- my-react-component.js
Javascript
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.