CODEWITHSUNDEEP
phpgulpbrowser-syncgulp-browser-syncgulp-connect-php
m-podolski
m-podolski

Reputation: 5

How to get Browser-Sync to serve PHP-Files in Gulp 4

I am working on a gulpfile which already works fine when its processing html/scss/js. Now I want to have my site on PHP-basis and need Browser-Sync to serve my PHP instead of showing "Cannot GET /" in the browser. I know that implies some path issue as it all works, when there is an index.html instead of an index.php in the build folder.

const {src,dest,series,parallel,watch} = require('gulp');
const del = require('del');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const origin = './src/';
const destination = './build/';

sass.compiler = require('node-sass');

async function clean(cb) {
    await del(destination);
    cb();
}

function html(cb) {
    src(origin + '*.html').pipe(dest(destination));
    cb();
}

function php(cb) {
    src(origin + '*.php').pipe(dest(destination));
    cb();
}

function css(cb) {
    src(origin + 'css/*.scss')
    .pipe(sourcemaps.init())
    .pipe(
        sass({
            sourcemap: true,
            outputStyle: 'compressed'
        })
    )
    .pipe(dest(destination + 'css'));
    cb();
}

function js(cb) {
    src(
        origin + 'js/lib/jquery.min.js'
        ).pipe(dest(destination + 'js/lib'));
    src(
        origin + 'js/*.js',
        ).pipe(dest(destination + 'js'));
    cb();
}

function watcher(cb) {
    watch(origin + '**/*.html').on('change',series(html,browserSync.reload));
    watch(origin + '**/*.php').on('change',series(php,browserSync.reload));
    watch(origin + '**/*.scss').on('change',series(css,browserSync.reload));
    watch(origin + '**/*.js').on('change',series(js,browserSync.reload));
    cb();
}

function server(cb) {
    browserSync.init({
        notify: false,
        //open: false,
        server: {
            baseDir: destination
        }
    })
    cb();
}

exports.default = series(clean, parallel(html,php,css,js), server, watcher);

I looked at some solutions which almost all are based on Gulp 3 + gulp-connect-php which seems not to be amongst the Gulp-Plugins anymore. Am I missing that Gulp4 + Node can handle that PHP out of the box? And if yes how? This is the closest I think I (as a nube) came to a solution: (These are only the changes/additions to the script above)

const phpConnect = require('gulp-connect-php');

function php(cb) {
    src(origin + '*.php').pipe(dest(destination));
    cb();
}

function watcher(cb) {
    watch(origin + '**/*.html').on('change',series(html,browserSync.reload));
    watch(origin + '**/*.php').on('change',series(php,browserSync.reload));
    watch(origin + '**/*.scss').on('change',series(css,browserSync.reload));
    watch(origin + '**/*.js').on('change',series(js,browserSync.reload));
    cb();
}

function connectsync(cb) {
    phpConnect.server({
        port: 8000,
        keepalive: true,
        base: destination
    },
        function() {
            browsersync({
                proxy: '127.0.0.1:8000'
            });
        });
    cb();
}

function server(cb) {
    browserSync.init({
        notify: false,
        open: true,
        server: {
            baseDir: destination
        }
    })
    cb();
}

exports.default = series(clean, parallel(html,php,css,js), connectsync, server, watcher);

but this seems to get stuck at the browsersync function which - I totally agree - is undefined. Any help is appreciated very much !!!

Upvotes: 0

Views: 1293

Answers (1)

m-podolski
m-podolski

Reputation: 5

After looking into the details of gulp-connect-php it turned out it supports only PHP 5.4 anyway so its not an option. Instead I utilized my XAMPP (while locally installed PHP + Apache might have been a liitle more elegant) and setup browser-sync to proxy to it:

function sync(cb) {
    browserSync.init({
        proxy: 'http://localhost/malte-podolski.de/build',
        port: 3000,
    })
    cb();
}

Upvotes: 0

Related Questions