3

I am new to gulp-4. I try run gulp js with php, browserSync it doesn't work? All other task work but php and browserSync not work at all. it's not open with browser anything is here wrong? is it possible to use with php with browserSync or any restrictions? I want to use browser sync with php but can't seem to get it to work.

Here is my Code...

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;
pcmax
  • 33
  • 1
  • 8

1 Answers1

3

The gulpfile.js (Gulp version 4.0.2) that i use in oder to create a php server is the following:

Assuming that you have a folder called "dist" where you have an "index.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'
        });
    });
});

I hope this helps you as a reference. I am writing only the relevant part of my file because it seems that you already got the rest to work.

In order to use functions instead of task (like in your code) and also watch the php files for changes, you can do the following:

Assuming that you want to watch the php files located in the /src folder and modify the /dist folder when there is a change.

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;

Note: "browser-sync" only works when there is the tag "body".

Manuel Reyes
  • 260
  • 2
  • 10