3

我是 gulp-4 的新手。我尝试用 php 运行 gulp js，browserSync 它不起作用？所有其他任务都可以工作，但 php 和 browserSync 根本不起作用。它没有用浏览器打开有什么问题吗？是否可以通过 browserSync 或任何限制与 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;
4

1 回答 1

3

我在 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;

注意：“浏览器同步”仅在有标签“正文”时才有效。

于 2019-07-22T14:02:08.957 回答