Simple Gulp Config for Word Press Dev

wp-gulp.js

// Gulp.js configuration
'use strict';

const

  // source and build folders
  dir = {
    src         : './static/',
    lib         : './static/lib/',
    build       : './assets/'
  },

  // Gulp and plugins
  gulp          = require('gulp'),
  gutil         = require('gulp-util'),
  newer         = require('gulp-newer'),
  imagemin      = require('gulp-imagemin'),
  sass          = require('gulp-sass'),
  postcss       = require('gulp-postcss'),
  deporder      = require('gulp-deporder'),
  concat        = require('gulp-concat'),
  stripdebug    = require('gulp-strip-debug'),
  uglify        = require('gulp-uglify')
;

// Browser-sync
var browsersync = false;

// Browsersync options
const syncOpts = {
  proxy       : 'texas-news.test',
  files       : dir.build + '**/*',
  open        : false,
  notify      : false,
  ghostMode   : false,
  ui: {
    port: 8001
  }
};

// browser-sync
gulp.task('browsersync', () => {
  if (browsersync === false) {
    browsersync = require('browser-sync').create();
    browsersync.init(syncOpts);
  }
});

// PHP settings
const php = {
  src           : dir.src + 'templates/**/*.php',
  build         : dir.build
};

// copy PHP files
gulp.task('php', () => {
  return gulp.src(php.src)
    .pipe(newer(php.build))
    .pipe(gulp.dest(php.build));
});

// font settings
const fonts = {
  src           : dir.src + 'fonts/**/*.*',
  build         : dir.build + 'fonts/'
};

// copy font files
gulp.task('fonts', () => {
  return gulp.src(fonts.src)
    .pipe(newer(fonts.build))
    .pipe(gulp.dest(fonts.build));
});

// JS Library settings
const jslib = {
  src           : dir.src + 'lib/js/**/*.js',
  build         : dir.build + 'lib/js/',
  filename      : 'js-libs.min.js'
};

// copy JS Library files
gulp.task('jslib', () => {
  return gulp.src(jslib.src)
    .pipe(newer(jslib.build))
    .pipe(deporder())
    .pipe(stripdebug())
    .pipe(uglify())
    .pipe(concat(jslib.filename))
    .pipe(gulp.dest(jslib.build));
});

// CSS Library settings
const csslib = {
  src           : dir.src + 'lib/css/**/*',
  build         : dir.build + 'lib/css/',
  processors: [
    require('cssnano')
  ]
};

// copy CSS Library files
//.pipe(postcss(csslib.processors))
gulp.task('csslib', () => {
  return gulp.src(csslib.src)
    .pipe(newer(csslib.build))
    .pipe(gulp.dest(csslib.build));
});

// CSS Admin Settings
const cssadmin = {
  src           : dir.src + 'admin/*',
  build         : dir.build + 'css/admin/',
  processors: [
    require('autoprefixer')({
      browsers: ['last 2 versions', '> 2%']
    }),
    require('cssnano')
  ]
};

// copy CSS ADMIN files
//.pipe(postcss(csslib.processors))
gulp.task('cssadmin', () => {
  return gulp.src(cssadmin.src)
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(postcss(cssadmin.processors))
    .pipe(newer(cssadmin.build))
    .pipe(gulp.dest(cssadmin.build))
});

// image settings
const images = {
  src         : dir.src + 'images/**/*',
  build       : dir.build + 'images/'
};

// image processing
gulp.task('images', () => {
  return gulp.src(images.src)
    .pipe(newer(images.build))
    .pipe(imagemin())
    .pipe(gulp.dest(images.build));
});

// // bootstrap library build settings
// const bootstrap = {
//   src           : dir.lib + 'bootstrap/scss/bootstrap.scss',
//   watch         : dir.lib + 'bootstrap/scss/**/*',
//   build         : dir.build + 'lib/bootstrap/',
//   processors: [
//     require('autoprefixer')({
//       browsers: ['last 2 versions', '> 2%']
//     }),
//     require('postcss-flexbugs-fixes'),
//     require('cssnano')
//   ]
// };

// // create the bootstrap task set
// gulp.task('bootstrap', () => {
//   return gulp.src(bootstrap.src)
//     .pipe(sass())
//     .pipe(postcss(bootstrap.processors))
//     .pipe(gulp.dest(bootstrap.build))
// });

// CSS settings
var css = {
  src         : dir.src + 'sass/newstyles.sass',
  watch       : dir.src + 'sass/**/*',
  build       : dir.build + 'css/',
  sassOpts: {
    outputStyle     : 'nested',
    imagePath       : images.build,
    precision       : 3,
    errLogToConsole : true
  },
  processors: [
    require('postcss-assets')({
      loadPaths: ['images/'],
      basePath: dir.build,
      baseUrl: '/wp-content/themes/texas-timber-theme/'
    }),
    require('autoprefixer')({
      browsers: ['last 2 versions', '> 2%']
    }),
    require('css-mqpacker'),
    require('cssnano')
  ]
};

// CSS processing
gulp.task('css', ['images'], () => {
  return gulp.src(css.src)
    .pipe(sass(css.sassOpts))
    .pipe(postcss(css.processors))
    .pipe(gulp.dest(css.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});

// JavaScript settings
const js = {
  src         : dir.src + 'js/**.js',
  build       : dir.build + 'js/',
  filename    : 'scripts.js'
};

// JavaScript processing
gulp.task('js', () => {

  return gulp.src(js.src)
    .pipe(deporder())// .pipe(stripdebug()).pipe(uglify())
    .pipe(concat(js.filename))
    .pipe(gulp.dest(js.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());

});

// run all tasks
//gulp.task('build', ['php', 'jslib', 'csslib', 'bootstrap', 'css', 'js', 'fonts']);
gulp.task('build', ['css', 'cssadmin', 'jslib', 'js', 'fonts']);

// watch for file changes
gulp.task('watch', ['browsersync'], () => {

  // PHP main changes
  //gulp.watch(php.src, ['php'], browsersync ? browsersync.reload : {});

  // image changes
  // gulp.watch(images.src, ['images']);

  // CSS changes in BOOTSTRAP
  // gulp.watch(bootstrap.watch, ['bootstrap']);

  // CSS changes
  gulp.watch(css.watch, ['css'], browsersync ? browsersync.reload : {});

  // font changes
  gulp.watch(fonts.src, ['fonts']);

  // JavaScript Library changes
  gulp.watch(jslib.src, ['jslib']);

  // CSS Library changes
  // gulp.watch(jslib.src, ['csslib']);

  // CSS Admin changes
  gulp.watch(cssadmin.src, ['cssadmin']);

  // JavaScript main changes
  gulp.watch(js.src, ['js']);

});

// default task
gulp.task('default', ['build', 'watch']);