Настройка веб-приложения Yeoman с PHP

Попытка настроить веб-приложение для использования PHP-сервера вместо HTML.

Я безуспешно пытался следовать этому ответу на примере. Gulp-webapp с BrowserSync и PHP

Я добавил в свой проект gulp-connect-php.

// Towards the top of my gulpfile, added: 
const connect = require('gulp-connect-php');

// Added the following task below: 

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

Побежал gulp php-serve

PHP 5.5.36 Development Server started [etc…]
Listening on http://127.0.0.1:9001

Однако не без ошибок:

ReferenceError: httpProxy is not defined

Как это можно решить? Я бы даже не возражал против использования MAMP, который у меня уже запущен на порту 8888.


php browser-sync generator yeoman
person scottrod    schedule 05.09.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Кажется, я пропустил важную часть установки http-proxy, которую, как мне казалось, я уже устанавливал раньше.

Вот идиотское руководство по тому, как заставить PHP работать с самым популярным генератором yeoman, генератором веб-приложений, с большой благодарностью TobyG

Установите https://www.npmjs.com/package/http-proxy#installation

npm install http-proxy --save

Установите gulp-connect-php.

npm install --save-dev gulp-connect-php

Добавьте эти две функции в начало файла gulpfile.js.

const connect = require('gulp-connect-php');
const httpProxy = require('http-proxy');

Добавьте эту дополнительную задачу в gulpfile.js.

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']);
});
person scottrod    schedule 05.09.2016
comment
Оно работает. Мне пришлось изменить некоторые биты в html-задаче в моем gulpfile: с return gulp.src('app/*.html') на return gulp.src(['app/*.html', 'app/*.php']), чтобы скомпилировать js и css, вызываемые из файлов php, в папку dist. - person Alex Fuentes; 12.09.2016
comment
Также вы должны сделать то же самое редактирование в задаче wiredep. - person Alex Fuentes; 12.09.2016
comment
Если вы обновили генератор-веб-приложение до версии 2.3.2 и выше, вам потребуется изменить одну дополнительную строку в предлагаемом коде. Измените browserSync({... на browserSync.init({, чтобы избежать ошибки browserSync is not a function... - person Alex Fuentes; 30.11.2016