【问题标题】:Setting up Yeoman Webapp with PHP使用 PHP 设置 Yeoman Webapp
【发布时间】:2016-09-05 14:54:48
【问题描述】:

尝试设置 yo webapp 以使用 PHP 服务器而不是 HTML。

我尝试通过示例遵循此答案,但没有成功。 Gulp-webapp running BrowserSync and 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

如何解决?我什至不介意使用我已经在 8888 端口上运行的 MAMP

【问题讨论】:

    标签: php generator yeoman browser-sync


    【解决方案1】:

    似乎我错过了安装 http-proxy 的一个重要部分,我以为我之前已经安装过。

    这是让 PHP 与最流行的 yeoman 生成器、生成器 webapp 一起工作的白痴指南,非常感谢 TobyG

    安装http-proxy

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

    【讨论】:

    • 它有效。我必须在我的 gulpfile 中更改 html 任务中的一些位:从 return gulp.src('app/*.html')return gulp.src(['app/*.html', 'app/*.php']) 以便将从 php 文件调用的 js 和 css 编译到 dist 文件夹。
    • 另外你必须在wiredep任务中做同样的编辑。
    • 如果您将 generator-webapp 更新到 2.3.2 以后,您需要在建议的代码中多更改一行。将browserSync({...更改为browserSync.init({以避免错误browserSync is not a function...
    猜你喜欢
    • 2014-08-11
    • 2023-03-05
    • 1970-01-01
    • 2014-12-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多