我的主要目标是调整 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/
. 不过,我更喜欢将它放在临时文件夹中,因为我不需要那个已编译的 .css 文件与我的 Sass 文件一起挂在那里。
对于路线问题,我试图告诉wiredep
插件更改路径,例如 from bower_components/jquery/dist/jquery.js
to ../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
,但我不知道这是否可能。