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() {
        port: 8000,
        keepalive: true,
        base: "."
    }, function (){
            proxy: ''

function browserSyncReload(done) {

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

function css() {
    return gulp
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(rename({ suffix: ".min" }))
    .pipe(postcss([autoprefixer(), cssnano()]))

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

exports.default = watch;

Photo by Kobu Agency on Unsplash

2 comentários

  1. 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:
    [Browsersync] Access URLs:
    Local: http://localhost:3000
    UI: http://localhost:3001
    UI External: http://localhost:3001

Deixar uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

pt_BRPortuguês do Brasil