WordPress » Build Tools

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:

  1. Allowing insecure WebSocket connections | Damir’s Corner

  2. 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?

date 24. May 2023 | modified 13. May 2024
filename: Wordpress » Env » Build Tools