gulp-to-vitelisted

Migrate a Dockerized, Makefile-driven Drupal theme front build from Gulp to Vite. Use when the user mentions replacing Gulp with Vite, a "gulp to vite" migration, modernizing a Drupal theme build, dropping the gulp-* dependency tree, gulp-imagemin ARM/Alpine build pain, an `npm install` that fails on optipng-bin, or a Drupal theme whose SCSS/JS edits do not hot-reload. Covers the feasibility verdict, the plugin-to-disk (Arch B) approach that keeps *.libraries.yml untouched, ready-to-fork Vite plugins, the dev HMR wiring, the Drupal/Apache caching layers that must be disabled for HMR to work at all, and Docker/Makefile/CI changes. IMPORTANT: all build commands MUST go through Makefile/npm targets inside the node container, never run directly on the host.
JMAILLY/claude-migration-skills · ★ 0 · Web & Frontend · score 70

Install: claude install-skill JMAILLY/claude-migration-skills

# Gulp → Vite migration skill (Dockerized Drupal theme) Migrate a Drupal theme front build from **Gulp** to **Vite**, iso-functional and low-risk. Reference implementations: `sterimed` (Tailwind) and `ginger-cebtp` (SASS + classic jQuery scripts — the case this skill is tuned for). ## Golden rule: everything goes through the container The project is Dockerized + Makefile-driven. Run the build inside the `node` service, never on the host — the host arch (esp. Apple Silicon/macOS) makes the `imagemin-*` native binaries fail with `ENOEXEC`, which is **not** a code bug. | Need | Command | |---|---| | Install deps | `make npm-install` (or `make npm c='install'`) | | Dev server (watch + HMR) | `make npm-dev` | | Production build | `make npm-build` | | One-off verify build | `docker run --rm -v "$(pwd)":/var/www/html -w /var/www/html <project>-node:latest sh -c 'rm -rf node_modules && npm install && npm run build'` | ## Step 0 — Feasibility verdict (say this out loud first) For a classic GM theme, **Vite's headline features (bundling, tree-shaking, per-module HMR) buy almost nothing.** Check why before promising speed: - Theme JS is usually **classic jQuery/`Drupal.behaviors` IIFEs** (no `import`/`export`). Gulp just terser-copies them 1:1. → grep the JS source; if there are zero `import`/`export`, do **not** bundle — copy files. - Vendor libs (swiper, fancybox, owl, masonry…) are loaded **straight from `node_modules/` by `*.libraries.yml`**, never touched by Gulp. → ke