Gulp for WordPress

gulpfile.js

'use strict'

const gulp = require('gulp')
const styles = require('./assets/build/tasks/styles.js')
const icons = require('./assets/build/tasks/icons.js')
const pot = require('./assets/build/tasks/pot.js')

/**
 * Tasks
 */
const build = gulp.series(styles.default, icons.default, pot.default)
const watch = gulp.parallel(styles.watch, icons.watch, pot.watch)

gulp.task('build', build)
gulp.task('build:styles', styles.default)
gulp.task('build:icons', icons.default)
gulp.task('build:pot', pot.default)

gulp.task('watch', watch)
gulp.task('watch:styles', styles.watch)
gulp.task('watch:icons', icons.watch)
gulp.task('watch:pot', pot.watch)

gulp.task('default', build)

icons.js

const gulp = require('gulp')
const rename = require('gulp-rename')
const svgSprite = require('gulp-svg-sprite')

const paths = {
  src: 'assets/img/icons/*.svg',
  dest: 'assets/img/',
  name: 'icons.svg',
}

const config = {
  svgSprite: {
    mode: { symbol: true },
    shape: { transform: ['svgo'] },
    svg: {
      xmlDeclaration: false,
      namespaceClassnames: false,
    },
  },
}

function icons () {
  return gulp.src(paths.src)
    .pipe(svgSprite(config.svgSprite))
    .pipe(rename(paths.name))
    .pipe(gulp.dest(paths.dest))
}

function watchIcons () {
  return gulp.watch([
    paths.src,
  ], icons)
}

exports.default = icons
exports.watch = watchIcons

package.json

{
  "scripts": {
    "build": "gulp build",
    "watch": "gulp watch"
  },
  "dependencies": {
    "swiper": "^4.4.6",
    "swup": "0.4.1"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.1.0",
    "autoprefixer": "^9.4.3",
    "del": "^3.0.0",
    "eslint": "^5.11.1",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "gulp": "^4.0.0",
    "gulp-cli": "^2.0.1",
    "gulp-if": "^2.0.2",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^1.0.0",
    "gulp-svg-sprite": "^1.5.0",
    "gulp-wp-pot": "^2.3.3",
    "perfectionist": "^2.4.0",
    "postcss-easing-gradients": "^3.0.1",
    "postcss-fontpath": "^1.0.0",
    "postcss-import": "^12.0.1",
    "postcss-inline-svg": "^3.1.1",
    "postcss-preset-env": "^6.5.0",
    "purgecss-with-wordpress": "^1.0.0",
    "stylelint": "^9.9.0",
    "stylelint-config-standard": "^18.2.0",
    "tailwindcss": "^0.7.3"
  },
  "main": "index.js"
}

pot.js

const gulp = require('gulp')
const gulpif = require('gulp-if')
const del = require('del')
const wpPot = require('gulp-wp-pot')
const rename = require('gulp-rename')
const replace = require('gulp-replace')

const paths = {
  src: 'views/**/*.twig',
}

const config = {
  textDomain: 'nug',
  twigFiles: 'views/**/*.twig',
  phpFiles: '**/*.php',
  cacheFolder: 'views/cache',
  destFolder: 'languages',
  keepCache: true,
}

function generate () {
  return gulp.src(config.phpFiles)
    .pipe(wpPot({ domain: config.textDomain }))
    .pipe(gulp.dest(config.destFolder + '/' + config.textDomain + '.pot'))
    .pipe(gulpif(!config.keepCache, del.bind(null, [config.cacheFolder], { force: true })))
}

function compile () {
  del.bind(null, [config.cacheFolder], { force: true })

  const gettextRegex = {
    simple: /(__|_e|translate|esc_attr__|esc_attr_e|esc_html__|esc_html_e)\(\s*?['"].+?['"]\s*?,\s*?['"].+?['"]\s*?\)/g,
    plural: /_n\(\s*?['"].*?['"]\s*?,\s*?['"].*?['"]\s*?,\s*?.+?\s*?,\s*?['"].+?['"]\s*?\)/g,
    disambiguation: /(_x|_ex|_nx|esc_attr_x|esc_html_x)\(\s*?['"].+?['"]\s*?,\s*?['"].+?['"]\s*?,\s*?['"].+?['"]\s*?\)/g,
    noop: /(_n_noop|_nx_noop)\((\s*?['"].+?['"]\s*?),(\s*?['"]\w+?['"]\s*?,){0,1}\s*?['"].+?['"]\s*?\)/g,
  }

  // Iterate over .twig files
  return gulp.src(config.twigFiles)

    // Search for Gettext function calls and wrap them around PHP tags.
    .pipe(replace(gettextRegex.simple, function (match) { return '<?php ' + match + '; ?>' }))
    .pipe(replace(gettextRegex.plural, function (match) { return '<?php ' + match + '; ?>' }))
    .pipe(replace(gettextRegex.disambiguation, function (match) { return '<?php ' + match + '; ?>' }))
    .pipe(replace(gettextRegex.noop, function (match) { return '<?php ' + match + '; ?>' }))

    // Rename file with .php extension
    .pipe(rename(function (filePath) { filePath.extname = '.php' }))

    // Output the result to the cache folder as a .php file.
    .pipe(gulp.dest(config.cacheFolder))
}

const pot = gulp.series(compile, generate)

function watchPot () {
  return gulp.watch([
    paths.src,
  ], pot)
}

exports.default = pot
exports.generate = generate
exports.compile = compile
exports.watch = watchPot

styles.js

const gulp = require('gulp')
const rename = require('gulp-rename')
const postcss = require('gulp-postcss')
const atImport = require('postcss-import')
// const fontPath = require('postcss-fontpath')
const tailwindcss = require('tailwindcss')
// const easingGradients = require('postcss-easing-gradients')
const inlineSvg = require('postcss-inline-svg')
// const presetEnv = require('postcss-preset-env')
const purgecss = require('@fullhuman/postcss-purgecss')
const purgecssWordpress = require('purgecss-with-wordpress')
const autoprefixer = require('autoprefixer')
const perfectionist = require('perfectionist')

const themeWhitelistPatterns = []
class TailwindExtractor {
  static extract (content) {
    return content.match(/[A-Za-z0-9-_:/]+/g) || []
  }
}

const paths = {
  config: 'tailwind.js',
  src: 'assets/css/*.pcss',
  partials: 'assets/css/**/*.pcss',
  dist: 'assets/css/',
}

const config = {
  atImport: {
    path: [paths.dist],
  },
  fontPath: {
    checkFiles: true,
    ie8Fix: true,
  },
  tailwind: paths.config,
  easingGradients: {
    colorMode: 'rgb',
  },
  inlineSvg: {
    path: 'assets/img/icons',
  },
  presetEnv: {
    stage: 0,
    autoprefixer: false,
    features: {
      'nesting-rules': {
        bubble: ['apply', 'variants', 'responsive', 'screen'],
      },
    },
  },
  purgecss: {
    content: ['**/*.php', './views/**.*twig', './assets/**/*.pcss', './assets/**/*.svg', './assets/**/*.js'],
    extractors: [{
      extractor: TailwindExtractor,
      extensions: ['php', 'twig', 'pcss', 'svg', 'js'],
    }],
    whitelist: purgecssWordpress.whitelist,
    whitelistPatterns: purgecssWordpress.whitelistPatterns.concat(themeWhitelistPatterns),
  },
  autoprefixer: {
    browsers: ['>= 0%'],
    cascade: false,
  },
  perfectionist: {
    cascade: false,
    indentSize: 2,
    trimLeadingZero: false,
    maxAtRuleLength: false,
    maxSelectorLength: 1,
    maxValueLength: false,
  },
}

/*
 * Define our tasks using plain functions
 */
function styles () {
  return gulp.src(paths.src)
    .pipe(postcss([
      atImport(config.atImport),
      // fontPath(config.fontPath),
      tailwindcss(config.tailwind),
      // easingGradients(config.easingGradients),
      // inlineSvg(config.inlineSvg),
      // presetEnv(config.presetEnv),
      // purgecss(config.purgecss),
      autoprefixer(config.autoprefixer),
      perfectionist(config.perfectionist),
    ]))
    .pipe(rename({ extname: '.css' }))
    .pipe(gulp.dest(paths.dist))
}

function watchStyles () {
  return gulp.watch([
    paths.config,
    paths.src,
    paths.partials,
  ], styles)
}

exports.default = styles
exports.watch = watchStyles