Gulp 4 php with browserSync

Question

我是gulp-4的新手。我尝试用 php 运行 gulp js，浏览器同步它不起作用？所有其他任务都可以工作，但 php 和浏览器同步根本不起作用。它没有打开浏览器有什么问题吗？是否可以与带有浏览器同步或任何限制的PHP一起使用？我想将浏览器同步与 php 一起使用，但似乎无法让它工作。

这是我的代码...

const browsersync = require("browser-sync").create();
const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const postcss = require("gulp-postcss");
const del = require("del");
const rename = require("gulp-rename");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const newer = require("gulp-newer");
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const php = require('gulp-connect-php');
//Php connect
function connectsync() {
  php.server({}, function (){
   browserSync({
     proxy: 'maniadev'
       });
    });
}
// BrowserSync Reload
function browserSyncReload(done) {
    browserSync.reload();
    done();
}
// Clean assets
function clean() {
    return del(["./dist/assets/"]);
}
// Optimize Images
function images() {
 return gulp
    .src("./app/assets/img/**/*")
    .pipe(newer("./app/assets/img"))
    .pipe(
        imagemin([
            imagemin.gifsicle({ interlaced: true }),
            imagemin.jpegtran({ progressive: true }),
            imagemin.optipng({ optimizationLevel: 5 }),
            imagemin.svgo({
                plugins: [
                    {
                        removeViewBox: false,
                        collapseGroups: true
                    }
                ]
            })
        ])
    )
    .pipe(gulp.dest("./dist/assets/img"));
}
// CSS task
function css() {
    return gulp
        .src("./app/assets/sass/**/*.scss")
    .pipe(plumber())
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(gulp.dest("./dist/assets/css/"))
    .pipe(rename({ suffix: ".min" }))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest("./dist/assets/css/"))
    .pipe(browsersync.stream());
 }
 // Transpile, concatenate and minify scripts
 function scripts() {
     return (
        gulp
        .src(["./app/assets/js/**/*"])
        .pipe(plumber())
        .pipe(uglify())
        .pipe(concat('main.min.js'))
        // folder only, filename is specified in webpack config
        .pipe(gulp.dest("./dist/assets/js/"))
        .pipe(browsersync.stream())
   );
 }
  // Watch files
    function watchFiles() {
       gulp.watch("./app/assets/scss/**/*", css);
       gulp.watch("./app/assets/js/**/*", gulp.series( scripts));
       gulp.watch(
          gulp.series(browserSyncReload)
       );
       gulp.watch("./app/assets/img/**/*", images);
       gulp.watch("./app/**/*.php", gulp.series( browserSyncReload ));
 }

 // define complex tasks
 const js = gulp.series(scripts);
 const build = gulp.series(clean, gulp.parallel(css, images, js));
 const watch = gulp.parallel(watchFiles, connectsync);
 // export tasks
 exports.images = images;
 exports.css = css;
 exports.js = js;
 exports.clean = clean;
 exports.build = build;
 exports.watch = watch;
 exports.default = build;

Answer 1

我在 oder 中用于创建 PHP 服务器的 gulpfile.js（Gulp 版本 4.0.2）如下：

假设您有一个名为"dist"的文件夹，其中有一个"index.php"文件：

const gulp = require('gulp');
var php = require("gulp-connect-php");
var browsersync = require('browser-sync');
gulp.task('default', function() {
    php.server({
        // a standalone PHP server that browsersync connects to via proxy
        port: 8000,
        keepalive: true,
        base: "dist"
    }, function (){
        browsersync({
            proxy: '127.0.0.1:8000'
        });
    });
});

我希望这对您有所帮助作为参考。我只写文件的相关部分，因为您似乎已经让其余部分开始工作了。

为了使用函数而不是任务（如在代码中）并监视 php 文件的更改，您可以执行以下操作：

假设您想观看位于/src 文件夹中的 php 文件，并在有更改时修改/dist 文件夹。

const browsersync = require("browser-sync");
const gulp = require("gulp");
const phpConnect = require('gulp-connect-php');
//Php connect
function connectsync() {
    phpConnect.server({
        // a standalone PHP server that browsersync connects to via proxy
        port: 8000,
        keepalive: true,
        base: "dist"
    }, function (){
        browsersync({
            proxy: '127.0.0.1:8000'
        });
    });
}
// BrowserSync Reload
function browserSyncReload(done) {
    browsersync.reload();
    done();
}
function php(){
    return gulp.src("./src/**/*.php").pipe(gulp.dest("./dist"));
}
// Watch files
function watchFiles() {
    gulp.watch("src/**/*.php", gulp.series(php, browserSyncReload));
}
const watch = gulp.parallel([watchFiles, connectsync]);
exports.default = watch;

注意："浏览器同步"仅在有标签"body"时才有效。