Pipelines: Local gulp not found

[Dan Smith]

My build is for a WordPress child theme. It interfaces with a WordPress parent theme, which provides various Gulp build tasks.

The parent theme is made available to the pipeline via a Composer dependency. Parent and child themes are relocated into sibling folders using rsync, to mimic the folder structure that WordPress uses when installing parent and child themes. I have verified that the tree structure is correct using the Tree plugin (`apt-get install tree`).

In the child theme I use the --gulpfile  flag to tell Gulp to look in the sibling parent theme directory for gulpfile.js, and I use the --cwd flag to run these tasks against the files in the sibling child theme folder.

This command is fired via a Yarn/NPM build script in the child theme (yarn run build).

$ gulp --gulpfile ../wpdtrt/gulpfile.js --cwd ./

This works on my localhost, but not within the pipeline.

Gulp is installed during the build and the versions confirmed, so the error message isn't accurate. From researching this, it seems that this message can also be generated when gulpfile.js can't be located.

+ gulp -v

[08:01:37] CLI version 2.0.1

[08:01:37] Local version 4.0.0

Is there a reason why the relative path ../wpdtrt/gulpfile.js would not work within a pipeline?

I also tried with /opt/atlassian/pipelines/agent/build/themes/wpdtrt/gulpfile.js but this didn't work either. 

Here's the failing step in the pipeline:

+ yarn run build

yarn run v1.12.3

$ gulp --gulpfile ../wpdtrt/gulpfile.js --cwd ./

[08:01:38] Local gulp not found in /opt/atlassian/pipelines/agent/build/themes/wpdtrt-dbth

[08:01:38] Try running: npm install gulp

error Command failed with exit code 1.

 And this is bitbucket-pipelines.yml:

# Theme deployment
# Environment $VARIABLES are managed in Bitbucket
#
# @package BaseJumpImprov
# @since 0.2.0
# @see https://bitbucket-pipelines.prod.public.atl-paas.net/validator
#
# pipelines: marks the beginning of all your pipeline definitions.
# default: contains the steps that will run on every push.
# step: each step starts a new Docker container that includes a clone of your repository, and then runs the contents of your script section inside it.
# script: a list of commands that are executed in sequence.
#
# https://confluence.atlassian.com/bitbucket/configure-bitbucket-pipelines-yml-792298910.html
# https://www.atlassian.com/continuous-delivery/tips-for-scripting-tasks-with-Bitbucket-Pipelines

# Bitbucket Pipelines Docker image based on Debian/Jessie with PHP/MySQL (and more !)
# https://hub.docker.com/r/frozentech/bitbucket-pipelines-php-mysql/
image: frozentech/bitbucket-pipelines-php-mysql

pipelines:
branches:
development:
- step:
name: Build project & deploy to staging
caches:
- composer
- node
script:
# Update Node
- curl -sL https://deb.nodesource.com/setup_8.x | bash -
- apt-get install -y nodejs
# Get installed version
- node -v
# Install Gulp globally
- npm install -g gulp
# Install Yarn globally
- npm install -g yarn
# Install Git FTP
# Use the Personal Package Archive to get the latest version (1.5.1)
# else an older version (0.9.0) is installed, which doesn't work properly
- echo Install Git FTP
- add-apt-repository ppa:git-ftp/ppa
# On Debian, you need to modify the sources list to use the same PPA
# https://github.com/git-ftp/git-ftp/blob/master/INSTALL.md#debian-ubuntu-and-others-using-apt
# https://stackoverflow.com/questions/51841602/how-can-i-write-a-multi-line-if-block-on-bitbucket-pipeline
- source /etc/*-release
- if [ "$ID" = "debian" ]; then
- dist="$(echo /etc/apt/sources.list.d/git-ftp-ppa-*.list | sed 's/^.*ppa-\(.*\)\.list$/\1/')"
- sed -i.backup "s/$dist/precise/g" /etc/apt/sources.list.d/git-ftp-ppa-*.list
- fi
- apt-get update
- apt-get -qq install git-ftp
# Test the installed version
- git ftp --version
# Install Tree
- apt-get install tree
# Install RSync
- apt-get --yes --force-yes install rsync
# Move child theme files to sub-folder, to mimic WordPress folder structure
- echo Move repo files to WordPress themes subfolder
- mkdir -p themes/wpdtrt-dbth
- rsync -a --remove-source-files . themes/wpdtrt-dbth/
# Work in the new location
- cd themes/wpdtrt-dbth/
# Install Composer dependencies
- echo Install Composer dependencies
- composer install --prefer-dist --no-interaction --no-suggest
# Install Yarn/NPM dependencies
# Prevent Yarn install from creating a 'dirty' state which can't be FTP'd
- echo Install Yarn dependencies
- yarn install --non-interactive --frozen-lockfile
# Move parent theme files to sibling sub-folder,
- echo Move parent theme to themes/wpdtrt/
- rsync -a --remove-source-files vendor/dotherightthing/wpdtrt ../
# Create a local link to the globally installed Gulp module
- npm link gulp --no-bin-links
- gulp -v
- tree ../ -I 'node_modules|vendor'
- echo Run build
- yarn run build
# Test that the working directory is not 'dirty'
- git status
# If it is dirty, how have the files changed?
- git diff
# List all files in the directory
# Work in the root
- cd ../../
- tree -I 'node_modules|vendor'
# FTP transfer to server
# Options: init, catchup, push
# TODO: Comment out when project structure is stable
# - git ftp push --user $FTP_USERNAME_DEV --passwd $FTP_PASSWORD_DEV $FTP_SERVER_PATH_DEV

Thanks.

[Philip Hodder]

Hello,

Can you try add: 

npm install gulp # install locally

to your configuration. At the same time as when you install it globally. (You likely don't need the global version, but leave it in for now just for simplicity)

There have been cases, I've experienced, where programs only try to reference the local installation of a dependency, instead of the global one. The error message here also indicates that it's looking for a local installation of gulp. I don't use npm too often, so I'm not familiar with the details. But I suspect that's the issue going on here.

Alternatively you can try remove the '--no-bin-links' from the 'npm link gulp' command.

Thanks,

Phil