CodyFrame gulp config file for a PHP project

codyframe-v2-php-config.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync');
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssvariables = require('postcss-css-variables'); 
var calc = require('postcss-calc');  
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var connect  = require('gulp-connect-php');
var projectPath = 'localhost:8888/projectName'; // 👈 make sure to replace 'projectName' with the name of your project folder
var purgecss = require('gulp-purgecss');

// js file paths
var utilJsPath = 'main/assets/js'; 
var componentsJsPath = 'assets/js/components/*.js'; // component js files
var scriptsJsPath = 'assets/js'; //folder for final scripts.js/scripts.min.js files

// css file paths
var cssFolder = 'assets/css'; // folder for final style.css/style-fallback.css files
var scssFilesPath = 'assets/css/**/*.scss'; // scss files to watch

function reload(done) {
  browserSync.reload({notify: false});
  done();
} 

gulp.task('sass', function() {
  return gulp.src(scssFilesPath)
  .pipe(sassGlob())
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(postcss([autoprefixer()]))
  .pipe(gulp.dest(cssFolder))
  .pipe(browserSync.reload({
    stream: true,
    notify: false
  }));
  // if you need to support IE11 and below:
  // 1 - remove ; from the above line 👆
  // 2 - uncomment 3 lines below 👇
  //.pipe(rename('style-fallback.css'))
  //.pipe(postcss([cssvariables(), calc()]))
  //.pipe(gulp.dest(cssFolder));
});

gulp.task('scripts', function() {
  return gulp.src([utilJsPath+'/util.js', componentsJsPath])
  .pipe(concat('scripts.js'))
  .pipe(gulp.dest(scriptsJsPath))
  .pipe(rename('scripts.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest(scriptsJsPath))
  .pipe(browserSync.reload({
    stream: true,
    notify: false
  }));
});

gulp.task('watch', gulp.series(['sass', 'scripts'], function () {
  connect.server({}, function (){
    browserSync({
      proxy: projectPath, // 👈 this contains the name of your project folder
      notify: false
    });
  });
  gulp.watch('**/*.php', gulp.series(reload));
  gulp.watch('assets/css/**/*.scss', gulp.series(['sass']));
  gulp.watch(componentsJsPath, gulp.series(['scripts']));
}));

/* Gulp dist task */
// create a distribution folder for production
var distFolder = 'dist/';
var assetsFolder = 'dist/assets/';

gulp.task('dist', async function(){
  // remove unused classes from the style.css file with PurgeCSS and copy it to the dist folder
  await purgeCSS();
  // minify the scripts.js file and copy it to the dist folder
  await minifyJs();
  // copy the style-fallback (IE support) to the dist folder
  await moveCSS();
  // copy any additional js files to the dist folder
  await moveJS();
  // copy all the assets inside main/assets/img folder to the dist folder
  await moveAssets();
  // copy all html files inside main folder to the dist folder 
  await moveContent();
  console.log('Distribution task completed!')
});

function purgeCSS() {
  return new Promise(function(resolve, reject) {
    var stream = gulp.src(cssFolder+'/style.css')
    .pipe(purgecss({
      content: ['main/*.php', scriptsJsPath+'/scripts.js'],
      safelist: ['.is-hidden', '.is-visible'],
      defaultExtractor: content => content.match(/[\w-/:%@]+(?<!:)/g) || []
    }))
    .pipe(gulp.dest(distFolder+'/assets/css'));
    
    stream.on('finish', function() {
      resolve();
    });
  });
};

function minifyJs() {
  return new Promise(function(resolve, reject) {
    var stream = gulp.src(scriptsJsPath+'/scripts.js')
    .pipe(uglify())
    .pipe(gulp.dest(distFolder+'/assets/js'));
    
    stream.on('finish', function() {
      resolve();
    });
  });
};

function moveCSS() {
  return new Promise(function(resolve, reject) {
    var stream = gulp.src(cssFolder+'/style-fallback.css', { allowEmpty: true })
    .pipe(gulp.dest(assetsFolder+'css'));
    
    stream.on('finish', function() {
      resolve();
    });
  });
};

function moveJS() {
  return new Promise(function(resolve, reject) {
    var stream = gulp.src([scriptsJsPath+'/*.js', '!'+scriptsJsPath+'/scripts.js', '!'+scriptsJsPath+'/scripts.min.js'], { allowEmpty: true })
    .pipe(gulp.dest(assetsFolder+'js'));
    
    stream.on('finish', function() {
      resolve();
    });
  });
};

function moveAssets() {
  return new Promise(function(resolve, reject) {
    var stream = gulp.src(['main/assets/img/**'], { allowEmpty: true })
    .pipe(gulp.dest(assetsFolder+'img'));
    
    stream.on('finish', function() {
      resolve();
    });
  });
};

function moveContent() {
  return new Promise(function(resolve, reject) {
    var stream = gulp.src('main/*.php')
    .pipe(gulp.dest(distFolder));
    
    stream.on('finish', function() {
      resolve();
    });
  });
};