Issue while upgrading to Gulp 4

[jonathanstegall]

I have a WordPress theme and I'm trying to update all the methods to Gulp 4.

Dependencies:

const autoprefixer = require('autoprefixer');
const babel = require('gulp-babel');
const bourbon = require( 'bourbon' ).includePaths;
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const cssnano = require('cssnano');
const fs = require('fs');
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const packagejson = JSON.parse(fs.readFileSync('./package.json'));
const mqpacker = require( 'css-mqpacker' );
const plumber = require('gulp-plumber');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');
const sort = require( 'gulp-sort' );
const sourcemaps = require('gulp-sourcemaps');
const svgmin = require( 'gulp-svgmin' );
const uglify = require('gulp-uglify');
const wpPot = require('wp-pot');

Config:

const config = {
  styles: {
    front_end: 'assets/sass/*.scss',
    main: 'sass/**/*.scss',
    srcDir: 'assets/sass',
    front_end_dest: 'assets/css',
    main_dest: './'
  },
  scripts: {
    main: './assets/js/src/**/*.js',
    uglify: [ 'assets/js/*.js', '!assets/js/*.min.js', '!assets/js/customizer.js' ],
    dest: './assets/js'
  },
  images: {
    main: './assets/img/**/*',
    dest: './assets/img/'
  },
  languages: {
    src: [ './*.php', '!vendor/**/*.php' ],
    dest: './languages/'
  },
  browserSync: {
    active: false,
    localURL: 'mylocalsite.local'
  }
};

I've tried various things for config.languages.src ranging from what is there currently to just functions.php but that value doesn't appear to change the result.

Then the translation method:

function translation() {
    return gulp.src(config.languages.src)
      .pipe(plumber())
      .pipe(sort())
      .pipe(wpPot( {
        domain: packagejson.name,
        package: packagejson.name,
      } ) )
      .pipe(gulp.dest(config.languages.dest));
}

I've tried to add the method both of these ways:

exports.translation    = translation;
gulp.task('translation', translation);

When I run gulp translation, I get the following:

[14:25:45] Using gulpfile ~/wp-content/themes/minnpost-largo/gulpfile.js
[14:25:45] Starting 'translation'...
[14:25:47] 'translation' errored after 2.37 s
[14:25:47] TypeError: dest.on is not a function
    at DestroyableTransform.Readable.pipe (/wp-content/themes/minnpost-largo/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:564:8)
    at DestroyableTransform.pipe2 (/wp-content/themes/minnpost-largo/node_modules/gulp-plumber/index.js:72:14)
    at translation (/wp-content/themes/minnpost-largo/gulpfile.js:213:8)
    at taskWrapper (/wp-content/themes/minnpost-largo/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:425:14)
    at runBound (domain.js:438:12)
    at asyncRunner (/wp-content/themes/minnpost-largo/node_modules/async-done/index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:79:9)

Can you point me in a direction here?

[rasmusbe]

It's because you are using the package wp-pot, not gulp-wp-pot. Change const wpPot = require('wp-pot'); to const wpPot = require('gulp-wp-pot');

[jonathanstegall]

Ugh I can't believe I missed that. Many thanks.