运行BrowserSync和PHP的webapp

Question

我在这里的主要目标是适应约曼的gulp-webapp开发工作流程来运行PHP。

具体来说，如果可能的话，我希望能够将gulp-php-connect与多个基本目录(用于Sass编译的CSS )和路由(用于Bower依赖项)一起使用。

我能够使用gulp-connect-php插件使用Gulp运行PHP，如下所示：

gulp.task('connect-php', function() {
  connectPHP.server({
    hostname: '0.0.0.0',
    bin: '/Applications/MAMP/bin/php/php5.5.3/bin/php',
    ini: '/Applications/MAMP/bin/php/php5.5.3/conf/php.ini',
    port: 8000,
    base: 'dev'
  });
});

然而，我想利用gulp的优秀但相当复杂的开发工作流体系结构，它依赖于BrowserSync、Sass编译器(为了开发将.css文件编译成.tmp文件夹)、自动前缀程序，并使用了许多其他有用的插件。

下面是我想适应使用gulp-connect-php或任何其他PHP的部分：

gulp.task('serve',  ['styles'],function () {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['.tmp', 'app'],
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });

  // watch for changes
  gulp.watch([
    'app/*.html',
    '.tmp/styles/**/*.css',
    'app/scripts/**/*.js',
    'app/images/**/*'
  ]).on('change', reload);

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

BrowserSync有一个代理选项，它允许我在gulp-connect-php服务器上运行它，这是相当惊人的。但是我需要gulp-connect-php它来使用多个基本目录和路由，就像BrowserSync所做的那样。

到目前为止，我已经想出了这个：

gulp.task('serve-php',  ['styles','connect-php'],function () {
  browserSync({
    proxy: "localhost:8000"
  });

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

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

为了暂时解决多个基本目录问题，我调整了styles任务，使其存储已编译的.css到/app，而不是.tmp/。不过，我更希望把它放在临时文件夹中，因为我不需要将编译好的.css文件与我的Sass文件挂在一起。

对于 trying 问题，我试图告诉wiredep插件将路径从bower_components/jquery/dist/jquery.js更改为../bower_components/jquery/dist/jquery.js，但没有成功。

我所能做的就是在index.php中手动重命名路径，但仍然无法工作。当运行gulp serve时，我得到：

/bower_components/jquery/dist/modernizr.js - No such file or directory

不过，...even将index.html中的路径更改为../bower_components/jquery/dist/jquery.js。

我认为这不起作用，因为gulp-connect-php服务器无法看到基本文件夹之外的内容。

我正在尝试不同的东西，虽然我对这个线程的标题非常模糊，但我认为最干净的解决方案是使用gulp-connect-php运行多个基本目录和路由，但我不知道这是否可能。

Answer 1

FWIW，我有一个非常简单和公平的解决方案，将编译后的.css文件放在app/ root中，并将/bower_dependencies文件夹移动到app/文件夹中。

对于Sass，我只需要将占位符中的路径更改为<!-- build:css styles/main.css -->，并在styles任务中更改dest。

对于bower_components，我刚刚在.bowerrc中编辑了bower_components：

{
  "directory": "app/bower_components"
} 

并将其添加到wiredep流中的gulpfile.js中：

  fileTypes: {
    scss: {
      replace: {
        scss: '@import "app/{{filePath}}";'
      }
    }
  },

Answer 2

我花了一段时间试图解决这个问题，但现在有了一个可行的解决方案。我解决的方法是使用BrowserSync作为服务器，并添加了一个中间件，如果它们与模式不匹配，代理请求.

安装http-代理包.

$ npm install --save-dev http-proxy

将代理包添加到gulpfile.js的顶部。

var httpProxy = require('http-proxy');

在BrowserSync之前添加单独的php服务器和代理服务器.

gulp.task('php-serve', ['styles', 'fonts'], function () {
    connect.server({
        port: 9001,
        base: 'app',
        open: false
    });

    var proxy = httpProxy.createProxyServer({});

    // ...

然后为服务器添加中间件，以查看请求是否需要代理.

        // ...

        server: {
            baseDir   : ['.tmp', 'app'],
            routes    : {
                '/bower_components': 'bower_components'
            },

            // THIS IS THE ADDED MIDDLEWARE
            middleware: function (req, res, next) {
                var url = req.url;

                if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
                    proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
                } else {
                    next();
                }
            }
        }

        // ...

这是完整的任务..。

gulp.task('php-serve', ['styles', 'fonts'], function () {
    connect.server({
        port: 9001,
        base: 'app',
        open: false
    });

    var proxy = httpProxy.createProxyServer({});

    browserSync({
        notify: false,
        port  : 9000,
        server: {
            baseDir   : ['.tmp', 'app'],
            routes    : {
                '/bower_components': 'bower_components'
            },
            middleware: function (req, res, next) {
                var url = req.url;

                if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
                    proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
                } else {
                    next();
                }
            }
        }
    });

    // watch for changes
    gulp.watch([
        'app/*.html',
        'app/*.php',
        'app/scripts/**/*.js',
        'app/images/**/*',
        '.tmp/fonts/**/*'
    ]).on('change', reload);

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

希望这能节省你所有的时间，我花在解决这件事上！:o)