0

我正在研究一个 gulpfile，它在处理 html/scss/js 时已经可以正常工作。现在我想让我的网站基于 PHP，并且需要 Browser-Sync 来服务我的 PHP，而不是在浏览器中显示“Cannot GET /”。我知道当构建文件夹中有index.html而不是index.php时，这意味着一些路径问题。

const {src,dest,series,parallel,watch} = require('gulp');
const del = require('del');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const origin = './src/';
const destination = './build/';

sass.compiler = require('node-sass');

async function clean(cb) {
    await del(destination);
    cb();
}

function html(cb) {
    src(origin + '*.html').pipe(dest(destination));
    cb();
}

function php(cb) {
    src(origin + '*.php').pipe(dest(destination));
    cb();
}

function css(cb) {
    src(origin + 'css/*.scss')
    .pipe(sourcemaps.init())
    .pipe(
        sass({
            sourcemap: true,
            outputStyle: 'compressed'
        })
    )
    .pipe(dest(destination + 'css'));
    cb();
}

function js(cb) {
    src(
        origin + 'js/lib/jquery.min.js'
        ).pipe(dest(destination + 'js/lib'));
    src(
        origin + 'js/*.js',
        ).pipe(dest(destination + 'js'));
    cb();
}

function watcher(cb) {
    watch(origin + '**/*.html').on('change',series(html,browserSync.reload));
    watch(origin + '**/*.php').on('change',series(php,browserSync.reload));
    watch(origin + '**/*.scss').on('change',series(css,browserSync.reload));
    watch(origin + '**/*.js').on('change',series(js,browserSync.reload));
    cb();
}

function server(cb) {
    browserSync.init({
        notify: false,
        //open: false,
        server: {
            baseDir: destination
        }
    })
    cb();
}

exports.default = series(clean, parallel(html,php,css,js), server, watcher);

我查看了一些几乎所有基于Gulp 3 + gulp-connect-php 的解决方案，这些解决方案似乎不再属于 Gulp-Plugins 了。我错过了 Gulp4 + Node 可以开箱即用地处理 PHP 吗？如果是的话怎么办？这是我认为我（作为一个 nube）最接近解决方案的方法：（这些只是上面脚本的更改/添加）

const phpConnect = require('gulp-connect-php');

function php(cb) {
    src(origin + '*.php').pipe(dest(destination));
    cb();
}

function watcher(cb) {
    watch(origin + '**/*.html').on('change',series(html,browserSync.reload));
    watch(origin + '**/*.php').on('change',series(php,browserSync.reload));
    watch(origin + '**/*.scss').on('change',series(css,browserSync.reload));
    watch(origin + '**/*.js').on('change',series(js,browserSync.reload));
    cb();
}

function connectsync(cb) {
    phpConnect.server({
        port: 8000,
        keepalive: true,
        base: destination
    },
        function() {
            browsersync({
                proxy: '127.0.0.1:8000'
            });
        });
    cb();
}

function server(cb) {
    browserSync.init({
        notify: false,
        open: true,
        server: {
            baseDir: destination
        }
    })
    cb();
}

exports.default = series(clean, parallel(html,php,css,js), connectsync, server, watcher);

但这似乎陷入了browsersync- 我完全同意 - 未定义的功能。非常感谢任何帮助！

4

1 回答 1

0

在查看了gulp-connect-php的详细信息后，结果发现它只支持 PHP 5.4，所以它不是一个选项。相反，我使用了我的XAMPP（而本地安装的 PHP + Apache 可能更优雅）并设置浏览器同步来代理它：

function sync(cb) {
    browserSync.init({
        proxy: 'http://localhost/malte-podolski.de/build',
        port: 3000,
    })
    cb();
}
于 2020-06-28T12:49:52.060 回答