How to keep source and build folders in sync during debugging? - php

Question

Recently, updated a PHP project to use source folder and build folder. We're using Gulp to build the project from the 'src' folder to the 'build' folder after pulling the 'src' folder and project configuration files from our Git repo.
project_root
|
├── src
|
├── build
|
└── {project configuration files}
Both frontend and backend developers are currently running the 'gulp watch' we've setup to keep our 'src' and 'build' folders in sync.
One of this biggest annoyances we've encountered is while debugging our project in the browser we often open the offending file where an error is reported and tinker with the code until it works in browser. However, more times than I'd like to count, we make the change to a file in the 'build' folder while debugging and then we have to manually make the change in the 'src' folder (which is often overlooked at first).
Is there any way to fix this workflow issue?
Dueling Watchers Approach
I thought about making a two file watchers to detect changes in the 'build' and 'src' folders respectively. When either watch detects a change, turn off the other folders watcher, process the changed files and sync up the other folder, then turns the other folder's watcher back on.
(This seems like the sledge-hammer approach.)
IDE Approach
We PHPStorm and Sublime Text 3 depending on the developer. In Sublime Text, I simply exclude the 'build' folder from the project so I don't accidentally open it by default. (However, I accidentally open 'build' folder files when debugging the PHP too often.)
Other
Perhaps the way we're handling project structure in general needs work. Frontend and backend development is often done in concert. Any suggestions?

Answer 1

After flailing my arms wildly at this problem for a few hours after posting this I found an answer to my own problem.
Turns out the best way to handle this is to use the IDE Approach and create path mappings for your project:
PHPStorm (documentation)
Settings » PHP » Servers
Check the 'use path mappings' selection.
In our case we mapped the '../src' folder to '../build'
Sublime Text with 'Xdebug Client' package
Preferences » Package Settings » Xdebug » Settings - User
Add the following to your Xdebug.sublime-settings file:
{
"path_mapping": {
"C:/wamp/www/your-project/build" : "C:/wamp/www/your-project/src"
}
}
Once your path mappings are setup, you can successfully set a breakpoint in a php file in your '../src' folder run your debugging session and the file in your '../build' folder will breakpoint at the same location.