GULP : One stop Solution for Small to Large PHP and HTML Projects

gulp.js

### For PHP Files:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
  return gulp.src('app/scss/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass()) // Converts Sass to CSS with gulp-sass
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.reload({
                 stream: true
             }))
     });

gulp.task('browserSync', function () {
  browserSync.init({
  server: {
                 baseDir: 'app'
             }
         })
});

gulp.task('watch', ['sass'], function () {
  gulp.watch('app/scss/**/*.scss', ['sass']);
  browserSync.init({
  proxy: "http://localhost/nokkhotro-responsive-ui/app/",
  files: ["**/*.php"]
  });
});

### For HTML FIles:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
  return gulp.src('app/scss/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass()) // Converts Sass to CSS with gulp-sass
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.reload({
                 stream: true
             }))
});

gulp.task('serve', function () {
  browserSync.init({
  server: {
  baseDir: 'app',
  index: "list.html"
  }
  })
});

gulp.task('default', ['serve','sass'], function () {
  gulp.watch('app/scss/**/*.scss', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
});