2016-09-05 9 views
0

HTMLの代わりにPHPサーバを使用するようにwebappを設定しようとしています。PHPでYeoman Webappを設定する

この回答に続いて、成功例はありませんでした。 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を使用しても気にしません

答えて

2

私は前にインストールしたと思ったHTTPプロキシをインストールする重要な部分を見逃したようです。

は、ここでインストールhttp-proxy

npm install http-proxy --save 

インストールTobyG

に大きなおかげで、最も人気のあるヨーマン発電機、発電機のWebアプリケーションで動作するようにPHPを得ることの馬鹿ガイドですgulp-connect-php

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

gulpfile.jsの先頭にこれらの2つの機能を追加します

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

に、この追加のタスクを追加します。 gulp.src( 'app/*。html'、 'app/*')を返すには、gulp.src( 'app/*。html' .php ']) 'を実行してjsとcssをphpファイルからdistフォルダにコンパイルします。 –

+0

また、wiredepタスクで同じ編集を行う必要があります。 –

+0

generator-webappを2.3.2以降に更新した場合は、提案されたコードで余分な行を1つ変更する必要があります。 'browserSync is not a function ... 'というエラーを回避するために、' browserSync({... 'を' browserSync.init({')に変更します。 –

関連する問題