GULP 4 + Browser-Sync + gulp-connect-php

Simple gulpfile.js for local PHP server development with autoreload.

Posting it here since I couldn't find a ready solution for Gulp 4, feel free to ask any questions.

const browsersync = require("browser-sync");
const gulp = require("gulp");
const phpConnect = require('gulp-connect-php');
const plumber = require("gulp-plumber");
const sass = require("gulp-sass");
const rename = require("gulp-rename");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");

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

function browserSyncReload(done) {
    browsersync.reload();
    done();
}

function watchFiles() {
    gulp.watch("./**/*.php", browserSyncReload);
    gulp.watch("./scss/**", css);
}

function css() {
    return gulp
    .src("./scss/**/*.scss")
    .pipe(plumber())
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(gulp.dest("./css/"))
    .pipe(rename({ suffix: ".min" }))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest("./css/"))
    .pipe(browsersync.stream());
 }

const watch = gulp.parallel([watchFiles, connectsync]);

exports.default = watch;

Photo by Kobu Agency on Unsplash


Comments

2 responses to “GULP 4 + Browser-Sync + gulp-connect-php”

  1. Thanks!

  2. Hello. It doesn’t seem to be an error, but it didn’t work. Can you help me?

    $ gulp
    [18:02:49] Using gulpfile C:\xampp-ativo\htdocs\trabalho\costa-dourada\gulpfile.js
    [18:02:49] Starting ‘default’…
    [18:02:49] Starting ‘watchFiles’…
    [18:02:49] Starting ‘connectsync’…
    [Browsersync] Proxying: http://127.0.0.1:8000
    [Browsersync] Access URLs:
    ————————————-
    Local: http://localhost:3000
    External: http://192.168.15.4:3000
    ————————————-
    UI: http://localhost:3001
    UI External: http://localhost:3001

Leave a Reply

Your email address will not be published. Required fields are marked *

en_USEnglish