Gulp Useref Nested Directories

Question

I'm a Gulp novice with a directory structure like this:

.tmp
│   file001.html
│   file002.html
|   ...
│
|───js
|   │   file1.js
|   │   file2.js
└───css
    │   file1.css
    │   file2.css
    |
    └───folder1
    │   file011.html
    │   file012.html
    │
    ├───subfolder1
    │   │   file111.html
    │   │   file112.html
    │   │   ...
    │
    └───folder2
    │   file021.html
    │   file022.html
    |

Here is my useref task

gulp.task('useref', function() {
 return gulp.src('.tmp/**/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});

And here is the HTML

<!--build:css /css/styles.min.css-->
<link rel="stylesheet" href="/css/file1.css">
<link rel="stylesheet" href="/css/file2.css">
<!--endbuild-->

<!--build:js /js/main.min.js -->
<script src="/js/file1.js"></script>
<script src="/js/file2.js"></script>
<!-- endbuild -->

What I want to do is have useref grab the assets in all html files within the .tmp, directory (including those in the subdirectories) and recreate the directory structure within a dist directory.

I get the uglified and minified files as expected in the dist root, but I also get multiple errors such as this:

Error: File not found with singular glob: .tmp/folder1/subfolder1/js/file1.js

The file is not found because, as you can see, the path is wrong (should be .tmp/js/file1.js). Also, the subdirectories are not created in dist.

I've tried to understand why this is happening and what I can do to correct it, but after hours of trying, I'm turning here for help. Thanks in advance.

Answer 1

I found a plugin that accomplishes what I need. https://docs.omniref.com/js/npm/gulp-use-asset/0.1.1 does the same thing as useref, but maintains the directory structure when the files are copied into dist.