为 PHP 服务器和浏览器同步配置 gulpfile.js答案

【问题标题】：Configuring gulpfile.js for PHP server and Browser Sync为 PHP 服务器和浏览器同步配置 gulpfile.js
【发布时间】：2017-04-30 14:16:40
【问题描述】：

我想在本地创建一个 PHP 服务器，通过 Browser Sync 监视我的文件的更改。我希望它在我的浏览器中打开新标签并显示 index.php 文件的内容。我的 gulpfile.js ：

var gulp = require('gulp'); 
var browserSync = require('browser-sync').create(); //reloading while saving file
var php = require('gulp-connect-php'); //for PHP server

// ------------------------------------------------- //
// --------- Server and watching for changes --------//
// ------------------------------------------------- //


gulp.task('php', function() {
    php.server({ base: 'src', port: 8080, keepalive: true, hostname: 'localhost'});
});

gulp.task('browser-sync',['php'], function() {
    browserSync.init({
        proxy: '127.0.0.1',
        port: 8080
    });
});

gulp.task('htmlServer', function() {
   gulp.src(['src/*.+(html|ico|php)'])
   .pipe(browserSync.reload({
      stream: true
   }));;
});

gulp.task('stylesServer', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(browserSync.reload({
      stream: true
   }));
});

gulp.task('jsServer', function() {
    gulp.src(['src/scripts/*.js'])
    .pipe(browserSync.reload({
      stream: true
   }));
});

// --------- wrapped together --------- //

gulp.task('server', ['browser-sync','php','htmlServer','stylesServer','jsServer'], function() {
    gulp.watch('src/styles/*.css',['stylesServer']);
    gulp.watch('src/*.+(html|php)',['htmlServer']);
    gulp.watch('src/scripts/*.js',['jsServer']);
});

但是当我启动 gulp 服务器任务时，它会在浏览器中弹出新选项卡并像在屏幕上一样继续加载：

有人可以帮助我吗？我正在查看许多教程，但没有任何效果，我不想变得越来越困惑。预先感谢您的帮助。

【问题讨论】：

标签： php server gulp localhost browser-sync

【解决方案1】：

var gulp = require('gulp'); 
var browserSync = require('browser-sync').create(); //reloading while saving file
var php = require('gulp-connect-php'); //for PHP server

检查这部分你写 gulp 但你必须写 gulp.php 并且在你调用任何文件名的地方你必须添加文件扩展名然后你在你的项目中调用这个文件

【讨论】：