Not understanding this SitePoint article about Gulp + Wordpress

CMS & WordPress
1

  • 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’?

2

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/'
  },
3

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.

4

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.

5

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

6

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
7

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