我的主要目标是调整 Yeoman 的 gulp-webapp 开发工作流程来运行 PHP.
My main goal here is to adapt Yeoman's gulp-webapp development workflow to run PHP.
具体来说，我希望能够将 gulp-php-connect 与 多个基本目录(用于从 Sass 编译的 CSS)和 路由 一起使用strong>(对于 Bower 依赖项)，如果可能的话.
Specifically, I want to be able to use gulp-php-connect with multiple base directories (for the compiled CSS from Sass) and routes (for Bower dependencies), if that's even possible.
我可以使用 gulp-connect-php 插件通过 Gulp 运行 PHP，例如这个:
I'm able to run PHP with Gulp using the gulp-connect-php plugin, like this:
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 文件夹中，用于开发)、自动前缀，并使用了许多其他有用的插件.
However, I'd like to take advantage of gulp-webapp's excellent but quite entangled development workflow architecture, which relies on BrowserSync, Sass compiler (compiles to a .css file into a .tmp folder, for development), auto-prefixer, and uses a bunch of other useful plugins.
这是我想适应使用 gulp-connect-php 或任何其他 PHP 的部分:
Here's the part of it that I would like to adapt to use gulp-connect-php or any other 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 会.
BrowserSync has a proxy option, that allows me to run it with gulp-connect-php server, which is pretty amazing. But I need gulp-connect-php it to use multiple base directories and routes, like BrowserSync does.
到目前为止，我想出了这个:
So far I've come up with this:
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 文件一起挂在那里.
To temporarily fix the multiple base directories issue, I tweaked the styles task so it stores the compiled .css to /app instead of .tmp/. I'd prefer to have it on a temp folder though, because I don't need that compiled .css file hanging around there with my Sass files.
对于 routes 问题，我试图告诉 wiredep 插件更改路径，例如，从 bower_components/jquery/dist/jquery.js 到 ../bower_components/jquery/dist/jquery.js，没有成功.
For the routes issue, I'm trying to tell wiredep plugin to change a path, say, from bower_components/jquery/dist/jquery.js to ../bower_components/jquery/dist/jquery.js, with no success.
我所能做的就是手动重命名 index.php 中的路径，但它仍然不起作用.当运行 gulp serve 我得到:
All I could do was manually rename the paths in index.php, and it still doesn't work. When running gulp serve I get:
/bower_components/jquery/dist/modernizr.js - 没有这样的文件或目录
...即使我将 index.html 中的路径更改为 ../bower_components/jquery/dist/jquery.js.
...even though I changed the path in index.html to ../bower_components/jquery/dist/jquery.js.
我认为这不起作用，因为 gulp-connect-php 服务器无法看到基本文件夹之外的内容.
I believe that doesn't work because the gulp-connect-php server can't see what's outside the base folder.
我正在尝试不同的事情，虽然我对这个线程的标题非常模糊，但我认为最干净的解决方案是使用 gulp-connect-php，但我不知道这是否可能.
I'm trying different things, and though I've been pretty vague on this thread's title, I think that the cleanest solution would be to run multiple base directories and routes with gulp-connect-php, but I don't know if that's possible.
FWIW，我有一个非常简单和公平的解决方案，将编译后的 .css 文件放在 app/根目录中，并将/bower_dependencies 文件夹移动到应用程序/文件夹.
FWIW, I've got a quite simple and fair solution for that by placing the compiled .css file in the app/ root and moving /bower_dependencies folder inside the app/ folder.
对于 Sass，我只需要将占位符中的路径更改为 并更改 deststyles 任务中的 code>.
For Sass, I only needed to change the path in the placeholder to <!-- build:css styles/main.css --> and change the dest in the styles task.
对于 bower_components，我只是在 .bowerrc 中编辑了 bower_components:
For the bower_components, I just edited bower_components in .bowerrc:
{
"directory": "app/bower_components"
}
并将其添加到 gulpfile.js 中的 wiredep 流中:
and added this to the wiredep stream in gulpfile.js:
fileTypes: {
scss: {
replace: {
scss: '@import "app/{{filePath}}";'
}
}
},
这篇关于运行 BrowserSync 和 PHP 的 Gulp-webapp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！