title: How to get Browser-Sync to serve PHP-Files in Gulp 4
body: <p>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 <strong>&quot;Cannot GET /&quot;</strong> in the browser. I know that implies some path issue as it all works, when there is an <strong>index.html</strong> instead of an <strong>index.php</strong> in the <strong>build</strong> folder.</p>
  <pre><code>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);
  
  </code></pre>
  <p>I looked at some solutions which almost all are based on <strong>Gulp 3</strong> + <strong>gulp-connect-php</strong> 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)</p>
  <pre><code>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);
  
  </code></pre>
  <p>but this seems to get stuck at the <code>browsersync</code> function which - I totally agree - is undefined.
  Any help is appreciated very much !!!</p>