0

I've built a gulp project that allows me to build and watch a wordpress theme (bones) in a wordpress installation that is outside the working folder:

Working folder: localhost/sites/testbed/
- dev-bones
- node_modules
- gulpfile.js
- package.json
- package-lock.json

Target folder: localhost/sites/my-wordpress-site/wp-content/themes/
- bones

I installed 'del' and 'run-sequence' so that I could delete the target folder before the build sequence began.

del task:

gulp.task('clean:dirbuild', function() {
  // If build directory is outside the working folder:
  return del.sync(dir.build, {force: true});
  // If inside:
  // return del.sync(dir.build);
});

build task:

gulp.task('build', function (callback) {
  runSequence('clean:dirbuild', 
    ['php', 'css', 'js', 'copyroot', 'copytranslation'],
    callback
  )
});

default task:

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

After typing 'gulp watch' the browser launches and the wordpress site loads. But I get a white screen with a message saying that the path to bones.php doesn't exist.

I checked the target folder and it does exist.

After scratching my head for a while I manually refreshed the browser and the site loaded correctly.

I've gone through a number of permutations of the code above, always with the same result.

I found this post here on Stack Overflow : run-sequence doesn't run gulp tasks in order, but it didn't seem to fit my case.

I've uploaded the full gulpfile to Github.

I'd be very grateful if someone could give it the once-over and see where I'm going wrong.

UPDATE I went back to a tutorial I got the 'del' task from. In the comments the author had pointed out that he'd missed something from the task: the callback.

So I updated the code:

gulp.task('clean:dirbuild', function(callback) {
  // If build directory is outside the working folder:
  return del.sync(dir.build, {force: true}, callback);
  // If inside:
  // return del.sync(dir.build, callback);
});

and typed 'gulp'.

This time all I got was a white screen and manually refreshing didn't load the site.

Naj
  • 205
  • 1
  • 8

1 Answers1

0

OK I figured it out. The problem was with the order of execution of the 'default' task: some of the 'watch' tasks where firing before, during and after the 'build' task.

So I left everything as it was except I changed:

default task

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

to

gulp.task('default', function (callback) {
  runSequence('build', ['watch'], callback)
});

which ensures that the 'watch' task will run after the 'build' task.

Now, everything works as expected.

Note: I've deleted the example gulpfile.js from GitHub. When I've completed my project and got it on GitHub I'll post a link to it from here.

Naj
  • 205
  • 1
  • 8