I'm certainly no expert on gulp or node, so feel free to correct me/add to my answer...
I've tried to replicate a similar directory structure to what you describe here...
Uses gulp-tap and gulp-template
gulpfile.js
var gulp = require('gulp');
var template = require('gulp-template');
var tap = require('gulp-tap');
gulp.task('default', function () {
gulp.src('./src/**/**.js', { base: './src' })
// tap into the stream to get the current file and compile
// the template according to that
.pipe(tap(function (file) {
gulp.src('./src/template.html')
// compile the template using the current
// file.path as the src attr in the template file
.pipe(template({
sourcefile: file.path
}))
// not sure about this line but I'm sure it could be better
// splits the path on the / and then uses the second to last
// item in the split array (which is the current directory, minus src plus dist)
.pipe(gulp.dest('./dist/' + file.path.split('/')[file.path.split('/').length - 2]))
}))
// finally put the javascript files where they belong
.pipe(gulp.dest('./dist'))
});
template.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="<%- sourcefile %>"></script>
</head>
<body>
</body>
</html>
Beginning Directory Structure
.
|____dist
|____gulpfile.js
|____src
| |____bar
| | |____setup.js
| |____foo
| | |____setup.js
| |____template.html
Final Directory Structure
.
|____dist
| |____bar
| | |____setup.js
| | |____template.html
| |____foo
| | |____setup.js
| | |____template.html
|____gulpfile.js
|____src
| |____bar
| | |____setup.js
| |____foo
| | |____setup.js
| |____template.html