Gulp-webapp 运行 BrowserSync 和 PHP

Question

我的主要目标是使 Yeoman 的 gulp-webapp 开发工作流程适应运行 PHP。

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

我可以使用 gulp-connect-php 插件运行 PHP 和 Gulp，像这样：

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-webapp 优秀但相当复杂的开发工作流架构，它依赖于 BrowserSync，Sass 编译器（编译为 .css 文件放入 .tmp 文件夹，用于开发），auto-prefixer，并使用了一堆其他有用的插件。

这是我想适应使用 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 文件放在一起。

对于 routes 问题，我试图告诉 wiredep 插件更改路径，例如，从 bower_components/jquery/dist/jquery.js 到 ../bower_components/jquery/dist/jquery.js, 没有成功。

我所能做的就是手动重命名 index.php 中的路径，但它仍然不起作用。当运行ning gulp serve 我得到：

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

...即使我将 index.html 中的路径更改为 ../bower_components/jquery/dist/jquery.js。

我认为这行不通，因为 gulp-connect-php 服务器看不到基本文件夹之外的内容。

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

Answer 1

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

对于Sass，我只需要将占位符中的路径更改为并更改styles任务中的dest。

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

{
  "directory": "app/bower_components"
}

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

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

Answer 2

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

安装 http-proxy 包...

$ 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)

Gulp-webapp 运行 BrowserSync 和 PHP

Gulp-webapp running BrowserSync and PHP

php

sass

workflow

gulp

browser-sync