Gulp 4 php с browserSync - PullRequest
Новая
       46

Gulp 4 php с browserSync

0 голосов
/ 28 января 2019

Я новичок в глотке-4.Я пытаюсь запустить gulp js с php, browserSync не работает?Все остальные задачи работают, но php и browserSync не работают вообще.он не открывается в браузере, что-то здесь не так?Можно ли использовать с php с browserSync или какие-либо ограничения?Я хочу использовать синхронизацию браузера с 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;

1 Ответ

0 голосов
/ 22 июля 2019

gulpfile.js (Gulp версии 4.0.2), который я использую в oder для создания php-сервера, выглядит следующим образом:

Предполагается, что у вас есть папка с именем dist, где у вас есть индекс.php "file: 

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, вы можете сделать следующее:

Предполагая, что вы хотите просмотреть файлы php, расположенные в папке / src, и изменить папку / 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;

Примечание: «browser-sync» работает только при наличии тега «body».

...