Gulp-Connect-Php + browserSync + Gulp-Connect 地址使用问题答案

【问题标题】：Gulp-Connect-Php + browserSync + Gulp-Connect address in use issueGulp-Connect-Php + browserSync + Gulp-Connect 地址使用问题
【发布时间】：2017-02-16 18:09:07
【问题描述】：

我需要能够使用带有 php 支持和一些特定 url 重写的 browserSync。我想出了带有 Gulp-Connect-Php 包以及 Gulp-Connect + modrewrite 的 browserSync。这是我的配置：

var  
browserSync  = require('browser-sync'),  
phpconnect   = require('gulp-connect-php'),
connect      = require('gulp-connect'),
modrewrite   = require('connect-modrewrite'),

phpconnect.server({base:'dist/',port: 8010}, function (){
  connect.server({
    port: 8001,
    middleware: function() {
        return [
            modrewrite([
                '^/admin/(.*) - [L]',
                '^([^.]*|.*?\.php)$ http://localhost:8010$1 [P,NC]'
            ])
        ];
    }
 })

 browserSync({
   injectChanges: true,
   proxy: '127.0.0.1:8010'
 });

})

这很好，完全符合我的需要。启动时不时出现以下问题：

[error] You tried to start Browsersync twice! To create multiple instances, use browserSync.create().init()
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8001

换句话说，browserSync 在 gulp-connect 之前启动，并使用了 gulp-connect 应该使用的端口 8010，而 gulp-connect 无法启动。

我安装了 npm sleep 包并在启动 browserSync 之前添加了以下行：

sleep.sleep(15)

换句话说，我在启动 browserSync 之前添加了 15 秒的延迟。它有效，但我敢打赌有一个更优雅的解决方案。

请指教。

【问题讨论】：

标签： npm gulp browser-sync gulp-connect gulp-connect-php

【解决方案1】：

gulp-connect 内部包装了 connect，它启动了一个节点 http 服务器。

一旦服务器启动，它就会发出一个名为listening 的事件。 https://nodejs.org/api/net.html#net_event_listening

    var  
    browserSync  = require('browser-sync'),  
    phpconnect   = require('gulp-connect-php'),
    connect      = require('gulp-connect'),
    modrewrite   = require('connect-modrewrite'),

    phpconnect.server({base:'dist/',port: 8010}, function (){
      var app = connect.server({
        port: 8001,
        middleware: function() {
            return [
                modrewrite([
                    '^/admin/(.*) - [L]',
                    '^([^.]*|.*?\.php)$ http://localhost:8010$1 [P,NC]'
                ])
            ];
        }
     })
     app.server.on('listening', function () {
       browserSync({
         injectChanges: true,
         proxy: '127.0.0.1:8010'
       });
     });

【讨论】：