Pour ajouter l'auto-reload dans votre projet PHP, cela nécessite l'installation de BrowserSync, la configuration d'un serveur PHP, et la mise en place de BrowserSync pour surveiller les fichiers et recharger automatiquement le navigateur lorsque des modifications sont détectées.

Installer BrowserSync et les autres dépendances

Installez BrowserSync et les autres dépendances nécessaires, comme gulp et gulp-connect-php :

npm install --save-dev browser-sync gulp gulp-connect-php

Configurer Gulp et BrowserSync

Créez un fichier gulpfile.js à la racine de votre projet et ajoutez-y la configuration suivante :

const gulp = require("gulp");
const php = require("gulp-connect-php");
const browserSync = require("browser-sync").create();
const { exec } = require("node:child_process");
const { log } = require("node:console");

// Tâche pour démarrer le serveur PHP
gulp.task("php", (done) => {
    php.server({ base: "src", port: 8010, keepalive: true });
    done();
});

// Tâche pour démarrer BrowserSync et surveiller les fichiers
gulp.task(
    "browser-sync",
    gulp.series("php", (done) => {
        browserSync.init({
            proxy: "localhost:8010", // Proxy vers le serveur PHP
            port: 8080, // Port pour BrowserSync
            open: true,
            notify: false,
        });

        // Surveiller les fichiers et recharger le navigateur en cas de modification
        gulp.watch("src/**/*.php").on("change", browserSync.reload);
        gulp.watch("src/layout/output.css").on("change", browserSync.reload);
        done();
    }),
);

// Tâche pour surveiller les fichiers TailwindCSS
gulp.task("watch:css", (done) => {
    exec("npm run watch:css", (err, stdout, stderr) => {
        if (err) {
            console.error(`exec error: ${err}`);
            return;
        }
        console.log(`stdout: ${stdout}`);
        console.error(`stderr: ${stderr}`);
    });
    done();
});

// Tâche par défaut
gulp.task("default", gulp.parallel("browser-sync", "watch:css"));

Surveillance des fichiers : Nous configurons BrowserSync pour surveiller les fichiers PHP et CSS. Les modifications des fichiers PHP entraînent un rechargement complet du navigateur, tandis que les modifications des fichiers CSS sont injectées sans rechargement complet.

Démarrer BrowserSync

Pour démarrer BrowserSync avec votre projet PHP, ajoutez la commande suivante dans package.json :

"scripts": {
  "dev": "gulp"
}

Il suffit ensuite de lancer le projet avec la commande npm run dev.

Résultat

En suivant ces étapes, vous aurez configuré BrowserSync pour surveiller les fichiers de votre projet PHP et recharger automatiquement le navigateur lorsque des modifications sont détectées. Cela améliore considérablement le flux de travail de développement en éliminant le besoin de recharger manuellement le navigateur après chaque modification.

Sources

[1] https://fettblog.eu/php-browsersync-grunt-gulp/ [2] https://browsersync.io [3] https://browsersync.io/docs/options/ [4] https://stackoverflow.com/questions/39525435/gulp-trouble-setting-browsersync-and-watch [5] https://github.com/BrowserSync/recipes/issues/21