Question

我是一个Gulp新手，其目录结构如下：

.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
    |

这是我的useref任务

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

这是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 -->

我想要做的是让useref获取.tmp目录（包括子目录中的那些）中的所有html文件中的资源，并在dist目录中重新创建目录结构。

我在dist根目录中获得了预期的uglified和minified文件，但是我也遇到了多个错误：

错误：找不到奇异的glob文件：.tmp / folder1 / subfolder1 / js / file1.js

找不到该文件，因为您可以看到路径错误（应该是.tmp / js / file1.js）。此外，子目录不是在dist中创建的。

我试图理解为什么会发生这种情况以及我可以做些什么来纠正它，但经过几个小时的尝试后，我来这里寻求帮助。提前谢谢。

Answer 1

我找到了一个可以完成我需要的插件。 https://docs.omniref.com/js/npm/gulp-use-asset/0.1.1与useref的作用相同，但在将文件复制到dist时保持目录结构。

Gulp Useref嵌套目录

1 个答案: