gulp-vite

🥤 gulp-vite

Vite build system may not suit everyone, because of limiting entry options

As an alternative approach you can build assets with gulp and use Vite as a powerful dev server

Install into your project

npm i gulp-vite -D

You need to use "type": "module" in package.json to use esm syntax

import gulp from "gulp";
import vite from "gulp-vite";

gulp.task("serve", () => vite.init({
    output: "public", // default output path, from where your html files are served
    root: process.cwd(), // default root path
    ignored: [`**/src/templates/**`], // files to ignore with vite watch
    reloadPublic: false, // if html/json files should be reloaded in public dir
    reloadFiles: (file) => file.endsWith('.php') || file.endsWith('.latte'), // additional files to reload upon change
    vite: {
        // your vite config goes here
        css: {
            postcss: {
                plugins: []
            }
        }
    }
}));

// default vite configuration with gulp-vite, can be overwritten
{
    plugins: [this.plugin.middleware, this.plugin.reload],
        publicDir: path.join(options.root, options.output),
        server: {
        open: "/",
            host: true,
            fsServe: {
            strict: false
        },
        watch: {
            // default vite watch ignore files and additional files to ignore, reload for templates files is handled manually
            ignored: options.ignored.concat(['**/node_modules/**', '**/.git/**', `**/${options.output}/*.html`])
        }
    },
    root: options.root
}

import vite from "gulp-vite";

vite.server // server instance
vite.options // vite options
vite.reload // force browser reload
vite.plugin.middleware // included plugin for middleware to translate paths from /page to /public/page.html
vite.plugin.reload // included plugin for publicDir reload

Minimal example

On Github is minimal example where Vite is used as web server and gulp for build with Esbuild

Vite and Esbuild can run any format you want - javascript, typescript, postcss, sass, less, stylus

This is a minimal starting example that can be extended as needed

npm i && npx gulp serve

npx gulp --tasks

Requirements

• Node.js LTS (14.x) or current
• NPM or Yarn

Licence

MIT