Azure Pipeline: Unable to locate executable file: 'gulp'. during task Gulp@1

I am attempting to create a CI build that runs a custom gulp command but the pipeline is facing an issue on the task Gulp@1. I am running an NPM install command beforehand which should does include the gulp CLI dependency.

Here is the error that the Azure pipeline is returning:

Starting: gulp
==============================================================================
Task         : gulp
Description  : Run the gulp Node.js streaming task-based build system
Version      : 1.231.0
Author       : Microsoft Corporation
Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/build/gulp
==============================================================================
##[error]Unhandled: Unable to locate executable file: 'gulp'. Please verify either the file path exists or the file can be found within a directory specified by the PATH environment variable. Also verify the file has a valid extension for an executable file.
##[error]Error: Unable to locate executable file: 'gulp'. Please verify either the file path exists or the file can be found within a directory specified by the PATH environment variable. Also verify the file has a valid extension for an executable file.
    at Object._which [as which] (D:\agent_A\_work\_tasks\gulp_b82cfbe4-34f9-40f5-889e-c8842ca9dd9d\1.231.0\node_modules\azure-pipelines-task-lib\internal.js:323:23)
    at Object.<anonymous> (D:\agent_A\_work\_tasks\gulp_b82cfbe4-34f9-40f5-889e-c8842ca9dd9d\1.231.0\gulptask.js:29:19)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47
Finishing: gulp

And this is the following tasks that I am running in my build:

steps:
# Authenticate NuGet feeds to use this org's artifacts
- task: NuGetAuthenticate@0
  displayName: 'Authenticate Nuget Feeds'

# Restore Nuget Tool Installer
- task: NuGetToolInstaller@1
  displayName: NuGet Tool Installer
  inputs:
    versionSpec: '6.x'

# Restore Nuget Packages with Feed
- task: NuGetCommand@2
  displayName: Restore Nuget Packages with Feed
  inputs:
    command: 'restore'
    restoreSolution: '$(solution)'
    feedsToUse: 'select'
    vstsFeed: 'feed'
    
- task: Npm@1
  displayName: 'npm install'
  inputs:
    command: install
    workingDir: '$(Build.SourcesDirectory)'
    verbose: false

- task: Gulp@1
  inputs:
    workingDir: '$(Build.SourcesDirectory)'
    gulpFile: 'gulpfile.js'
    targets: 'proj:publish'
    displayName: 'Build Proj'

To note: building the project locally does work.

Okay I found a bit of a hacky way around it. I just added a separate task to install the gulp CLI globally and it got passed the issue.

- task: Npm@1
  displayName: 'Install Gulp CLI Globally'
  inputs:
    command: custom
    customCommand: 'install -g gulp-cli'
    workingDir: '$(Build.SourcesDirectory)'
    verbose: false

I think there is an issue with how my project is setup and how the packages were being installed. The reason for it working locally was that I had the Gulp CLI NPM package installed already locally.