我的主要目标是调整Yeoman的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-webapp优秀但相当纠缠的开发工作流程架构，它依赖于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/。不过，我更喜欢将其放在临时文件夹中，因为我不需要与我的 Sass 文件一起挂在那里的编译.css文件。
对于路由问题，我试图告诉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
。即使我将索引中的路径更改为.html ../bower_components/jquery/dist/jquery.js .
我相信这不起作用，因为gulp-connect-php服务器看不到基本文件夹之外的内容。
我正在尝试不同的事情，尽管我对这个线程的标题非常模糊，但我认为最干净的解决方案是使用 gulp-connect-php 运行多个基本目录和路由，但我不知道这是否可能。
我花了一段时间试图解决这个问题，但现在有一个可行的解决方案。 我解决的方法是使用 BrowserSync 作为服务器，并添加一个中间件，如果请求与模式不匹配，则代理请求......
安装 http 代理包...
$ npm install --save-dev http-proxy
将代理包添加到gulpfile.js顶部...
var httpProxy = require('http-proxy');
在浏览器同步之前添加一个单独的 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）
FWIW，通过将编译的.css文件放在 app/根中并在 app/文件夹中移动/bower_dependencies 文件夹，我有一个非常简单和公平的解决方案。
对于 Sass，我只需要将占位符中的路径更改为<!-- build:css styles/main.css -->，并更改styles任务中的dest。
对于bower_components，我刚刚在.bowerrc中编辑了bower_components：
{
"directory": "app/bower_components"
}
并将其添加到 gulpfile 中的wiredep流中.js：
fileTypes: {
scss: {
replace: {
scss: '@import "app/{{filePath}}";'
}
}
},