如何让 gulp + browsersync 运行 apache vhost？答案

【问题标题】：How do I get gulp + browsersync to work an apache vhost?如何让 gulp + browsersync 运行 apache vhost？
【发布时间】：2015-03-22 06:16:51
【问题描述】：

我想将 gulp、sass 和 browsersync 添加到我的工具包中。我现在正在运行配置了 sass 和 browsersync 任务的 gulp。

我正在为我的本地 apache 服务器上的虚拟主机运行一个 php 应用程序皮肤。

我正在尝试从监视任务运行 browsersync，使用 browsersync 的代理选项来使用我的虚拟主机。

目前，当我运行手表时，在端口 3000 上找不到服务器。如果我导航到 'localhost:3000'，我会收到 chrome 'no web page found' 消息。

如果我导航到端口 3001，我可以访问 browsersync 的管理 UI。所以我知道 browsersync 正在运行。

我的 gulp 配置如下

/* load plugins */
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    browsersync  = require('browser-sync') ;

/*
*  define tasks
*/

gulp.task('sass', function() {
    return sass('assets/sass/main.sass') ;        
}) ;


/*
*  browsersync conf
*/

gulp.task('browser-sync', function() {
    browsersync({
    proxy: 'localhost',
    port: '3000'
    });
});

gulp.task('browsersync-reload', function () {
    browsersync.reload();
});

gulp.task('watch', ['browser-sync'], function () {
  gulp.watch('assets/sass/**/*', ['css']);
});


/* Default task */
gulp.task('default', ['sass'], function() {
    gulp.watch("assets/sass/**.*", ['sass']);
});

【问题讨论】：

标签： apache gulp browser-sync

【解决方案1】：

如果您已经安装了 apache（带有 mamp 的示例），您必须将端口配置为 8080

我的配置：

 browserSync.init({
      open: 'external',
      host: 'local.dev',
      proxy: 'local.dev',
      port: 8080 // for work mamp
});

【讨论】：

【解决方案2】：

BrowserSync“代理”选项应该指向您的 apache 主机为您的应用提供服务的位置，而不是您想要访问它的位置。

例如，如果我在 localhost:9000 上运行 ruby 服务器，我会在代理选项中指出并通过浏览器通过浏览器同步将通过命令行输出给我的 url 访问

【讨论】：

【解决方案3】：

改用它，添加虚拟主机，例如mysite.local

然后

gulp.task('server', function() {
     browserSync.init({
        proxy: "mysite.local"
    });
});

【讨论】：