WordPress » Build Tools
Old way: Gulp or Grunt
Your old gulp setup does it quite well, still, doesn’t it? Let me be frank: No it doesn’t. It is slow as as a sloth
Modern: Bun
Using Bun.js as a bundler. Using Bun.js as a bundler – SOS Using Bun.js as a Bundler | Hacker News
Sve je to previše sveže i izgleda da Vite radi sasvim ok i dovoljno brzo. Ustvari, koristim bun umesto npm, a vite normalno - kao vite.
Should You Use Bun for Your Projects?
Contemporary: Vite.js
Advanced build chain supporting Hot Module Replacement (HMR) za šta Vite koristi esbuild
Namesti kasnije taj napredni reload:
Using Vite in WP dev: How to write WordPress Themes with SASS, TypeScript, and HMR. Sumolari/wp-hmr-theme: A starter WordPress theme with Hot Module Replacement, SCSS and TypeScript support
A ima i packages: blonestar/wp-theme-vite-tailwind: Wordpress + ViteJS + TailwindCSS development example theme, similar to Tailpress but without additional code added or kucrut/vite-for-wp: Vite integration for WordPress plugins and themes development.
Zgodno: https://github.com/idleberg/php-wordpress-vite-assets
Ima i ceo boilerplate: PressWind Starter theme · Presswind, WordPress Starter Theme TailwindCSS and ViteJS
The Standard: Webpack
Webpack using @wordpress/scripts
Make Webpack Configuration Easy With @wordpress/scripts. How to Use The @wordpress/scripts Build Tool. @wordpress/scripts includes a default Webpack configuration, but this can be overridden with your own webpack configuration. This is done by adding a webpack.config.js file in the root directory of your plugin or theme.
Best writeups are…
Sasvim dovoljno ali na kraju i nije baš jednostavno: Creating a Gutenberg block plugin using @wordpress/scripts To je baš moj desired folder structure.
Inside the module.exports declaration we export an array of our customised configurations for Webpack. If we were only making one configuration change then we could just export a single configuration object instead of an array of objects. As we will be adding a second configuration for our front-end asset bundle, we’re exporting an array.
Make Webpack Configuration Easy With wordpress/scripts -
About @wordpress/scripts
search for “–webpack-copy-php” here: @wordpress/scripts copying all PHP files from the src directory and its subfolders to the output directory. By default, only PHP files listed in the render field in the detected block.json files get copied.
So, just add render field into block.json for only that file to be copied
Webpack using @wpackio/scripts
Helper using webpack: WPACK.IO - javascript & css tooling for WordPress themes & plugins. This is a very neat webpack-based build chain to use for your WordPress development
Vite.js
Vite: Reaload on any file change
vite-plugin-full-reload vs vite-plugin-live-reload | npm trends
Mnogo popularniji:
ElMassimo/vite-plugin-full-reload: ♻️ Automatically reload the page when files are modified Manje: arnoson/vite-plugin-live-reload: A simple live reloading plugin for vite.
Rade identično, baš identično. A to je inače 2 linije u vite.config.js:
kao dodaš unutar plugins:
{
// my plugin to reload the browser when any PHP file is changed
name: "hot-reload-php",
handleHotUpdate({ file, server }) {
if (file.endsWith(".php")) {
server.ws.send({ type: "full-reload", path: "*" });
} else if (file.endsWith(".scss")) {
server.ws.send({ type: "full-reload", path: file });
}
},
},
Vite: better ENV
svitejs/vite-plugin-env-config I stavi: env({ prefix: ‘VITE_’ }), Ali meni plugin nije radio!
A ručno sam rešavao sa:
Bukvalno je nacrtano ovde: https://vitejs.dev/config/#using-environment-variables-in-config
Ovo je za WP
ThemePlate/vite-plugin-tailwindcss ThemePlate POgledaj ovaj kod jer izgleda napredan
HMR je i zbog scrolla koga nema!!! JES!
Official integrations with backends:
using manifest file. vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js aka: idleberg/php-wordpress-vite-assets: Injects assets from a Vite manifest to the Wordpress head
FIrefox required:
-
View mixed content: About mixed content and how to view it
Wordpress problem sa temama
Kako rešiti problem comment-a kao frontmattter u style.css. Pošto, ako optimizujemo fajl, on obriše config, a onda ga Wordpress ne tretira kao Temu.
Kandidati:
A Rollup plugin which replaces targeted strings in files while bundling. plugins/packages/replace at master · rollup/plugins · GitHub
Može i ovo jer ima opciju: vladshcherbin/rollup-plugin-copy: Copy files and folders using Rollup
Isto to, ali malo drugačije. Imaš poređenje i ispada da je ovaj brži otprilike. sapphi-red/vite-plugin-static-copy
Trebalo bi da radi, ali ne nalazim dokumentaciju: kirklin/unplugin-config: 🔧 Configuration file generator for web apps, allowing external customization of global variables without repackaging.. Built-in support for dotenv
Najfleksibilnije mi je ovo, da upišem neki config negde:
Zašto vite.js uopšte koristi rollup?