Gulp和Bower-創建適當的文件結構

Question

我正在將Bower添加到已經使用Gulp的項目中。 我的文件夾結構如下：

 |- bower_components
 |   |- dependency1
 |   |   |- dist
 |   |       |- lib1.js
 |   |       |- lib1.min.js
 |   |
 |   |- dependency2
 |       |- core
 |           |- sub
 |           |   |- extra.js
 |           |
 |           |- lib2.js
 |
 |- target
     |- js

我已經設法使用main-bower-files和bower-normalize將所有第三方自由復制到target / js。 但是它是扁平的（並且我沒有將bower-normalize選項flatten為true！），所以它看起來像：

target
 |- js
     |- lib1.js
     |- extra.js
     |- lib2.js

在bower.json配置文件中，文件lib1.js ， extra.js和lib2.js被標記為main 。

我想要實現的是具有如下文件結構：

target
 |- js
     |- dependency1
     |   |- lib1.js
     |
     |- dependency2
         |-  sub
         |    |- extra.js
         |
         |-  lib2.js

我將非常感謝您的幫助！

Answer 1

通過gulp-flatten ，這將幫助您刪除或替換文件的相對路徑。 另外，我強烈建議wiredep 。 它會自動為您處理所有Bower依賴關系以及依賴關系的順序。 希望這會幫助你。

您的帶有Bower組件的源目錄：

 |- bower_components
 |   |- dependency1
 |   |   |- dist
 |   |       |- lib1.js
 |   |       |- lib1.min.js
 |   |
 |   |- dependency2
 |       |- core
 |           |- sub
 |           |   |- extra.js
 |           |
 |           |- lib2.js
 |
 |- target
     |- js

使用gulp-flatten-

gulp.src(['bower_components/**/*.js'])
  .pipe(flatten({ includeParents: [1, 1]} ))
  .pipe(gulp.dest('build/'));

將創建此結構（從樹目錄上方）：

|- bower_components
|   |- dependency1
|   |   |- lib1.js
|   |
|   |- dependency2
|            |-  sub
|            |    |- extra.js
|            |
|            |-  lib2.js

includeParents: [1, 1]如果以兩個數字組成的數組傳遞，則頂部和底部的父級都將保留在文件的結果路徑中。

includeParents: 1如果以正數傳遞，它將在輸出中包括頂級父級的數目。

includeParents: -1如果作為負數傳遞，它將在輸出中包括底層父級的數目。