javascript - 如何用 gulp 反转 Angular 脚本顺序注入(inject)？

Question

当我使用 gulp watch-dev 构建时，我的 Angular 页面上有以下脚本(gulpfile.js 位于片段中问题的末尾)。

<!-- inject:js -->
  <script src="shared/toolbar/toolbarDirective.js"></script>
  <script src="shared/sidebar/sidebarDirective.js"></script>
  <script src="shared/sidebar/sidbarController.js"></script>
  <script src="components/home/homeService.js"></script>
  <script src="components/blog/blogService.js"></script>
  <script src="components/blog/blogController.js"></script>
  <script src="app.modules.js"></script>
  <script src="app.routes.js"></script>
<!-- endinject -->

我想在其他脚本之上获取 app.modules.js。我该怎么做？

这是文件结构:

app
|
|--shared
|  |--sidebar
|  |  |--sidebarController.js
|  |  |--sidebarDirective.js
|  |  |--sidebarTemplate.html
|  |
|  |--toolbar
|     |--toolDirective.js
|     |--toolbarTemplate.html
|
|--components
|  |--home
|  |  |--sidebarDirective.js
|  |  |--homeView.html
|  |
|  |--blog
|     |--sidebarDirective.js
|     |--blogView.html
|
|--app.modules.js
|--app.routes.js
|--index.html

这是我认为失败的地方:

pipes.orderedAppScripts = function() {
  return plugins.angularFilesort();
};

pipes.builtIndexDev = function() {

// sends verified vendor js in dev folder and catch a pipe ordered
var orderedVendorScripts = pipes.builtVendorScriptsDev()
    .pipe(pipes.orderedVendorScripts());

// sends verified app js in dev folder and catch a pipe ordered
var orderedAppScripts = pipes.builtAppScriptsDev()
    .pipe(pipes.orderedAppScripts());

var appStyles = pipes.builtStylesDev();

return pipes.validatedIndex()
    .pipe(gulp.dest(paths.distDev)) // write first to get relative path for inject
    .pipe(plugins.inject(orderedVendorScripts, {relative: true, name: 'bower'}))
    .pipe(plugins.inject(orderedAppScripts, {relative: true}))
    .pipe(plugins.inject(appStyles, {relative: true}))
    .pipe(gulp.dest(paths.distDev));
 };

buildIndexDev在watch-dev中调用，为开发环境构建index.html。 这是代码段中的 gulpfile.js:

<script src="https://gist.github.com/aemb/43ca3dbc7056157f952d.js"></script>

---

@HenryZou，这样做有一些副作用:

   pipes.orderedAppScripts = function() {
     return gulp.src([
       './**/*.modules.js',
       './**/*.js',
     ]).pipe(plugins.angularFilesort());
   };

奇怪的是:

  <!-- inject:js -->
  <script src="shared/toolbar/toolbarDirective.js"></script>
  <script src="../distDev/gulpfile.js"></script>
  <script src="../distDev/distDev/app.modules.js"></script>
  <script src="../distDev/app.routes.js"></script>
  <script src="shared/sidebar/sidebarDirective.js"></script>
  <script src="../devServer/routes.js"></script>
  <script src="shared/sidebar/sidebarController.js"></script>
  <script src="../app/app.routes.js"></script>
  <script src="../server.js"></script>
  <script src="components/home/homeService.js"></script>
  <script src="../gulpfile.js"></script>
  <script src="components/blog/blogService.js"></script>
  <script src="components/blog/blogController.js"></script>
  <script src="app.routes.js"></script>
  <script src="app.modules.js"></script>
  <script src="../distDev/app/app.modules.js"></script>
  <script src="../distDev/app.modules.js"></script>
  <script src="../app/app.modules.js"></script>
  <!-- endinject -->

所有以../开头的都不存在于文件夹中。其他的存在，但它们仍然处于不良状态。

Answer 1

在 glob 文件的 gulp 构建脚本中，在其他 *.js 文件之前指定 *.module.js。

   gulp.src([
        '/**/*.modules.js',
        '/**/*.js',
        ]).pipe(ngFilesort()),