2016-09-05 114 views
0

嘗試設置yo webapp以使用PHP服務器而不是HTML。使用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 

這又如何解決?我甚至不介意使用MAMP,我已經在端口8888上運行

回答

2

看來我錯過了安裝http-proxy的一個重要部分,我認爲這是我之前安裝的。

這裏得到PHP最流行的自耕農發電機,發電機的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']); 
}); 
+0

它的工作原理。我不得不在gulpfile的html任務中改變一些位:從'return gulp.src('app/*。html')'到'return gulp.src(['app/*。html','app/* .php'])',以便將從php文件調用的js和css編譯到dist文件夾。 –

+0

此外,您還必須在wiredep任務中執行相同的編輯。 –

+0

如果您已將generator-webapp更新爲2.3.2,則需要在建議的代碼中更改一行。更改'browserSync({...'到'browserSync.init({'爲了避免錯誤'browserSync不是一個函數...' –