Not understanding this SitePoint article about Gulp + Wordpress

  • First, this article does not specify which version of Gulp is being used.

  • Second, he tells you to create a folder called ‘mytheme’ and navigate into it and initialize the project with ‘npm init’… then later he says to put the src folder in ‘~/mytheme/’ instead of ‘mytheme’… I don’t know what that means.

To make matters more confusing (for me), his code then specifies the src directory as this:

dir = {
    src         : 'src/',
    build       : '/var/www/wp-content/themes/mytheme/'
  },

So, is ‘src’ actually ‘~/mytheme/’ (whatever that is) or is it ‘src’?

He answered me on twitter:

~ is the user’s root folder in Linux systems, but it can be anywhere that’s practical. So you’re creating /mytheme/src/ somewhere.

So, in this example, it looks like the gulpfile is in the same directory as the src folder since the path is just src right?

dir = {
    src         : 'src/',
    build       : '/var/www/wp-content/themes/mytheme/'
  },

Yeah, so the instructions are wrong. He runs ‘npm init’ in the theme directory and then installs his dependencies and gulpfile.js in a different directory. This leaves you with a package.json file in your theme with no dependencies listed. Sweet waste of time that was figuring it out.

Haha, even fixing that problem, the code still doesn’t work. gulp php throws

this error: assert.js:350
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/Applications/AMPPS/www/dev.devwp-gulpsass/wp/wp-content/themes/dev-gulp/node_modu
les/undertaker/lib/set-task.js:10:3)
at Gulp.task (/Applications/AMPPS/www/dev.devwp-gulpsass/wp/wp-content/themes/dev-gulp/node_modules/undertake
r/lib/task.js:13:8)
at Object. (/Applications/AMPPS/www/dev.devwp-gulpsass/wp/wp-content/themes/dev-gulp/gulpfile.js:8
2:6)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at execute (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp-cli/index.js:175:63)
at Liftoff.execute (/usr/local/lib/node_modules/gulp-cli/node_modules/liftoff/index.js:203:12)
at module.exports (/usr/local/lib/node_modules/gulp-cli/node_modules/flagged-respawn/index.js:51:3)
at Liftoff. (/usr/local/lib/node_modules/gulp-cli/node_modules/liftoff/index.js:195:5)
at /usr/local/lib/node_modules/gulp-cli/node_modules/liftoff/index.js:165:9

Hey, @ceeb are you even using Gulp 4 in this article? It doesn’t specify.

I was unable to get this working after several hours and have moved on.

The article is correct, but it is based on Gulp 3 which was the default version at the time. Gulp 4 (released as the default a few months later than the article) will give errors, but migration is relatively simple: https://www.sitepoint.com/how-to-migrate-to-gulp-4/. You can still use Gulp 3 if necessary - that will work as expected.

The src/ folder is relative to your mytheme project folder (which can be anywhere, although it’s presumed to be in the user’s root ~ folder).

The files are built to the absolute /var/www/wp-content/themes/mytheme/ folder. While this has the same mytheme name, you should never need to write code or even navigate to that folder. It’s created by Gulp.js.

I hope that helps.

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.