创建一个使用Gulp和Livereload运行PHP的服务器

时间:2014-12-02 13:49:49

标签: php node.js gulp server livereload

我想调整此代码以提供PHP文件。我让MAMP运行本地服务器,但我无法弄清楚这段代码是如何工作的,以便进行必要的更改。我知道Node服务器不会解释PHP文件,但我对使用serve-staticserve-index的这种架构感到困惑,因为显然我不能只使用本地文件路径在MAMP的localhost里面提供这些文件,对吧?我也想知道它为什么需要2个端口(9000和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']);
});

我基本上想要将PHP用于网站的模板(页脚,页眉等),就像this person posted here一样。

我觉得人们不再这样做了,所以欢迎使用静态资产和模板进行前端开发的任何建议(以便以后适应WordPress或其他基于PHP的CMS)。

修改

请阅读:Gulp-webapp running BrowserSync and PHP

1 个答案:

答案 0 :(得分:2)

我使用我原生的PHP安装作为服务器,而不是使用'gulp-connect-php'插件启动此服务器。我还没有在XAMPP / MAMP中使用它,但可能你只需要将'bin'和'ini'重新定位到XAMPP / MAMP的PHP安装中。但是我没有解决方案如何将Gulp与您的数据库连接起来。

'gulp-connect-php'插件:

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只能启动节点服务器(如果我没错的话)。

端口35729用于livereload javascript,您需要将其放在PHP,HTML文件的底部,放置其他脚本。 Grunt也使用完全相同的代码:

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

端口9000可能是Gulp Connect服务器的已定义端口。