Gulp-vite NPM | npm.io

🥤 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