Create a server that runs PHP with Gulp and Livereload

Question

I'd like to adapt this code to serve PHP files. I have MAMP running a local server but I can't figure out how this code works in order to make the necessary changes. I know that Node server won't interpret PHP files, but I'm confused about this architecture using serve-static and serve-index because apparently I can't just use a local file path inside MAMP's localhost to serve those files, right? I also wonder why it needs 2 ports (9000 and 35729).

gulp.task('connect', ['styles'], function () {
  var serveStatic = require('serve-static');
  var serveIndex = require('serve-index');
  var app = require('connect')()
    .use(require('connect-livereload')({port: 35729}))
    .use(serveStatic('.tmp'))
    .use(serveStatic('app'))
    .use('/bower_components', serveStatic('bower_components'))
    .use(serveIndex('app'));

  require('http').createServer(app)
    .listen(9000)
    .on('listening', function () {
      console.log('Started connect web server on http://localhost:9000');
    });
});


gulp.task('serve', ['connect', 'watch'], function () {
  require('opn')('http://localhost:9000');
});

gulp.task('watch', ['connect'], function () {
  $.livereload.listen();

  // watch for changes
  gulp.watch([
    'app/*.php',
    '.tmp/styles/**/*.css',
    'app/scripts/**/*.js',
    'app/images/**/*'
  ]).on('change', $.livereload.changed);

  gulp.watch('app/styles/**/*.scss', ['styles']);
  gulp.watch('bower.json', ['wiredep']);
});

I basically want to use PHP for templating (footer, header, etc) for a website, just like this person posted here.

I have the feeling that people don't do this anymore though, so any suggestions for front-end development with static assets and templates (for later adapting to WordPress or another PHP-based CMS) are welcome.

EDIT

Please read this: Gulp-webapp running BrowserSync and PHP

score 2 · Answer 1 · answered Dec 11 '14 at 16:37

I use my native PHP installation as a server, than I fire up this server with the 'gulp-connect-php' plugin. I didn't used it yet with XAMPP/MAMP, but probably you just need to re-locate the 'bin' and 'ini' to XAMPP/MAMP's PHP installation. But I not have a solution how you can connect Gulp with your database.

'gulp-connect-php' plugin:

https://www.npmjs.com/package/gulp-connect-php

var gulp = require('gulp'),
    livereload = require('gulp-livereload'),
    connectPHP = require('gulp-connect-php');

gulp.task('connect', function() {
  connectPHP.server({
    hostname: '0.0.0.0',
    bin: 'C:/php/php.exe',
    ini: 'C:/php/php.ini',
    port: 8000,
    base: 'dev',
    livereload: true
  });
});

Gulp Connect only can start a Node server (if I'm not wrong).

Port 35729 is for livereload javascript which you need to place at the bottom of your PHP, HTML files, where you put your other scripts. Grunt also using totally the same code:

<script src="//localhost:35729/livereload.js"></script>

Port 9000 probably is the defined port for the Gulp Connect server.

That's a fine plugin! Unfortunately I haven't been able to adapt it to other development workflows like the one I mentioned. Also, I wrote this new thread, which is very similar, except that it uses BrowserSync instead: http://stackoverflow.com/questions/27990781/gulp-webapp-running-browsersync-and-php — zok, Jan 16 '15 at 18:53

Create a server that runs PHP with Gulp and Livereload

1 Answers1