Configuring Gulp (BrowserSync + PHP Inside Server)

Gulp is a toolkit to automate and enhance your workflow. This means you can automate your process to spend less time doing repetitive stuff.

In this scenario I will use Gulp to compile Sass files into CSS (also creating source maps), copy JS into the build folder and reload or stream to the browser at real time when something was changed. And using PHP Files, because eventually I will use imports, for achievement this I will use PHP Inside Server.

The installation and configuration process is quite simple, I will do in steps:

Starting installing Gulp itself

1º- Check for node, npm, and npx

node --version
npm --version
npx --version

2º- Install the gulp command line utility (globally)

npm install --global gulp-cli

3º- After navigate into your project folder install the gulp package in your devDependencies

npm install --save-dev gulp

4º- Install gulp-sass, gulp-rename, gulp-concat, gulp-sourcemaps, browserSync and gulp-connect-php

npm install gulp-sass gulp-rename gulp-concat gulp-sourcemaps browser-sync gulp-connect-php --save-dev

4º- Create a gulpfile
Using your text editor, create a file named gulpfile.js in your project root with these content:

const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const php = require('gulp-connect-php');
const browserSync = require('browser-sync').create();

Create files paths

Put these at gulpfile.js, will indicate your source (src) and destination (dest) of your sass and js files to your tasks.

const paths = {
  scss: {
    src: './src/scss/*.scss',
    dest: './build/css/'
  },
  js: {
    src: './src/js/*.js',
    dest: './build/js/'
  }
};

Create tasks

Put these at gulpfile.js

1º- Create task compileSass to compile Sass into CSS files and stream to browserSync

function compileSass() {
  return src(paths.scss.src)
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'compressed'
    }))
    .pipe(rename({ extname: ".min.css" }))
    .pipe(sourcemaps.write())
    .pipe(dest(paths.scss.dest))
    .pipe(browserSync.stream());
}

2º- Create task compileJs to concatenate JS files and stream to browserSync

function compileJs() {
  return src(paths.js.src)
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(sourcemaps.write())
    .pipe(dest(paths.js.dest))
    .pipe(browserSync.stream());
}

Create watchers

Put these at gulpfile.js, to compile Sass (compileSass), concatenate JS Files (compileJs) when something was change in paths source (paths.sass.src or paths.js.src) and reload or stream to browser with BrowserSync

function watchSass() {
  watch(paths.scss.src, compileSass)
}
function watchJs() {
  watch(paths.js.src, compileJs)
}
function watchPhp() {
  watch(['./**/*.html', './**/*.php']).on('change',      browserSync.reload);
}

Create default task

Put these at the end of gulpfile.js

exports.default = series(compileSass, compileJs, parallel(sync, watchSass, watchJs, watchPhp))

This task will be triggered with only gulp command.

gulp

When this happens the tasks compileSass and compileJs will run in series then sync(BrowserSync + PHP Inside Server), watchSass, watchJs and watchPhp in parallel.

Create a PHP Inside Server

This will be done using gulp-connect-php

PS. In order to work, you will need to activate your PHP Path, you can check if yours is activated testing “php -v” in a terminal.

Activating PHP Path in Windows

Go to Control Panel > System and Security > System > Advanced System Configuration then Environment Variables

In System Variables edit Path variable, then click New and add your PHP Folder

Now with your PHP Path activate, create your sync function at your gulpfile.js

function sync() {
  php.server({
    base: './',
    port: 3000,
    keepalive: true,
    // custom PHP locations
    bin: '',
    ini: '',
  });
  browserSync.init({
    proxy: "localhost:3000",
    baseDir: "./",
    notify: false,
  });
}

If your PHP folder is in different location (e.g., installed with WAMP or MAMP), add the custom location of php.ini and php.exe to ini and bin proprieties.

It's done!

Now you can run gulp command at your terminal and see a PHP Inside Server run along with Browser Sync.

You can visit our repository to see this fully working (dev branch)
https://github.com/lucasbatiiista/gulp-config