我的主要目标是调整Yeoman的gulp-webapp开发工作流程来运行PHP.
具体而言,我希望能够使用gulp-php-connect
与多个基目录(从萨斯编译CSS)和途径(对鲍尔的依赖),如果这甚至有可能.
我可以使用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
...即使我将index.html中的路径更改为../bower_components/jquery/dist/jquery.js
.
我认为这不起作用,因为gulp-connect-php
服务器无法看到基本文件夹之外的内容.
我正在尝试不同的东西,虽然我对这个帖子的标题一直很模糊,但我认为最干净的解决方案是运行多个基本目录和路由gulp-connect-php
,但我不知道这是否可行.
1> TobyG..:
我花了一段时间试图解决这个问题,但现在有一个有效的解决方案.我解决的方法是使用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)