运行BrowserSync和PHP的Gulp-webapp [英] Gulp-webapp running BrowserSync and PHP
问题描述
我的主要目标是调整Yeoman的 gulp-webapp 开发工作流程来运行PHP。
具体而言，我希望能够将 gulp-php-connect 与多个基本目录结合使用（对于从Sass编译的CSS）和 routes （对于Bower依赖项），如果这是可能的话。
我可以运行PHP使用 gulp-connect-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文件夹中，用于开发），auto-prefixer，并使用其他一些有用的插件。
下面是我想适应使用 gulp-connect-php 或任何其他PHP的部分：
gulp.task（'serve'，['styles']，function（）{
browserSync（{
notify：false，
port ：9000，
服务器：{
baseDir：['.tmp'，'app']，
routes：{
'/ bower_components'：'bower_components'
}
//观察变化
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 的确如此。
到目前为止，我已经想出了这个：
<$ p $ （$ {$ b $ proxy：localhost：$ {code $ c> gulp.task''serve-php'，['styles'，'connect-php']，function（）{
browserSync 8000
））;
//观察变化
gulp.watch（[$ b $'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文件。
对于 routes 问题，我试图告诉 wiredep 插件来改变路径，比如从 bower_components / jquery / dist / jquery.js 至 ../ bower_components / jquery / dist / jquery.js ，但没有成功。
我所能做的就是手动重命名index.php中的路径，但它仍然不起作用。当运行 gulp serve 时，我得到：
/ bower_components / jquery / dist / modernizr。 js - 没有这样的文件或目录
...即使我将index.html中的路径更改为。 ./bower_components/jquery/dist/jquery.js 。
我相信这是行不通的，因为 gulp -connect-php 服务器无法看到基础文件夹外的内容。
我尝试了不同的事情，虽然我一直这个线程的标题非常模糊，我认为最简洁的解决方案是使用 gulp-connect-php 运行多个基本目录和路由，但是我不知道这是否可能。
FWIW，我已经有了一个相当简单和公平的解决方案，将编译好的.css文件放在app / root和移动/ bower_dependencies文件夹中的应用程序/文件夹。
对于Sass，我只需要将占位符中的路径更改为< ;! - build：css styles / main.css - > 并在样式 dest
对于bower_components，我只是在.bowerrc中编辑了bower_components：
{
directory：app / bower_components
}
并将其添加到gulpfile.js中的 wiredep 流中：
fileTypes：{
scss：{
替换：{
scss：'@importapp / {{filePath}};'
}
}
}，
My main goal here is to adapt Yeoman's gulp-webapp development workflow to run PHP.
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.
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'
});
});
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.
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 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]);
});
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.
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.
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 - No such file or directory
...even though I changed the path in index.html to ../bower_components/jquery/dist/jquery.js.
I believe that doesn't work because the gulp-connect-php server can't see what's outside the base folder.
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, 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.
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.
For the bower_components, I just edited bower_components in .bowerrc:
{
"directory": "app/bower_components"
}
and added this to the wiredep stream in gulpfile.js:
fileTypes: {
scss: {
replace: {
scss: '@import "app/{{filePath}}";'
}
}
},
这篇关于运行BrowserSync和PHP的Gulp-webapp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
