Gulp-webapp работает с BrowserSync и PHP

Моя главная цель здесь – адаптировать рабочий процесс Yeoman's gulp-webapp для запуска PHP.

В частности, я хочу иметь возможность использовать gulp-php-connect с несколькими базовыми каталогами (для скомпилированного CSS из Sass) и маршрутов (для зависимостей Bower), если это возможно.

• Проблема с доменом разработки среды MagentoCommerce
• Рабочий процесс UTF8 PHP, MySQL обобщен
• Как разработать зависимый пакет композитора без необходимости совершать или публиковать изменения?
• Помогите мне улучшить рабочий процесс непрерывного развертывания

Я могу запустить PHP с помощью Gulp, используя плагин 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, 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/ . Я предпочел бы иметь его в папке temp, хотя, потому что мне не нужен этот скомпилированный файл .css, висящий там с моими файлами Sass.

Что касается маршрутов , я пытаюсь сообщить плагин 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 , но я не знаю, возможное.

 $ npm install --save-dev http-proxy 

 var httpProxy = require('http-proxy'); 

 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']); }); 

 { "directory": "app/bower_components" } 

  fileTypes: { scss: { replace: { scss: '@import "app/{{filePath}}";' } } },