Configuration file for gulp

gulpfile.js

var gulp = require('gulp'); // Needed to run gulp
var sass = require('gulp-sass'); // Needed to run SCSS/Sass preprocessor
var browserSync = require('browser-sync'); // Needed to run Live Reload
var phpJade = require('gulp-jade-for-php'); // Needed to compile Jade file to PHP file
var runSequence = require('run-sequence'); // Needed for default file

gulp.task('jade-php', function() {
  gulp.src('*.jade')
    .pipe(phpJade())
    .pipe(gulp.dest('./'));
});

// Preprocessor task
gulp.task('sass', function() {
  return gulp.src('./css/style.sass') // SCSS/Sass path here, change to .scss if needed
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('./css')) // Target SCSS/Sass file here
    .pipe(browserSync.reload({ // Added into SCSS/Sass config to work with Live Reload
      stream: true
    }));
})


// Watches file for changes
gulp.task('watch', ['jade-php', 'sass', 'browserSync'], function (){ // Include broswerSync with sass to get tasks to run together
  gulp.watch('./css/style.sass', ['sass']);
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('*.jade', ['jade-php']);
  // gulp.watch('path.js', browserSync.reload);
  // Other watchers
});

// Live Reload
gulp.task('browserSync', function() {
  browserSync({
      proxy: 'waleed.dev' // Directory for server
    })
  gulp.watch("*.php").on("change", browserSync.reload);
});



gulp.task('default', function(callback) {
  runSequence(['sass', 'jade-php', 'browserSync', 'watch'],
    callback
  )
})