如何使用gulp反转Angular脚本注入顺序？

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 is called in watch-dev to build index.html for development environment. Here is my gulpfile.js in the snippet:

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

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

- Kobibr

---

你能确保只放置相关的代码部分，而不是将整个代码全部倒出来吗？ - harishr

谢谢你！我没意识到我在编辑时不小心删掉了那部分。 - Kobibr

请使用*.modules.js代替*.module.js。 - Henry Zou

这甚至更奇怪。 - Kobibr

Answer 1

在你的gulp构建脚本中，当你在全局匹配文件时，需要先指定*.module.js文件，再指定其他的*.js文件。

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

- Henry Zou

Answer 2

使用Gulp包gulp-html-replace来对js声明进行排序。

更多细节。

https://www.npmjs.com/package/gulp-html-replace

编辑 如果您想要使用缩小/合并的js文件，gulp-html-replace提供了很好的帮助。使用合并，您可以将供应商js和自定义js文件分开。我尚未尝试使用它与gulp-inject， 也许这可以帮助 通过gulp-html-replace控制注入顺序

gulp.task('htmlwrite', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'vendorjs': ['vendor.min.js','common.js'], // naming the js for the ordring, multiple files can be added using array 
        'mainjs': 'main.min.js'
    }))
    .pipe(gulp.dest('dist/'));
});

并且在 index.html 文件中

<!-- build:vendorjs -->
//includes the vendor js declaration
      <!-- endbuild -->

 <!-- build:mainjs -->

    <!-- endbuild -->

你也可以选择使用 gulp-usemin，它似乎可以解决你的问题，使用类似于 gulp-html-replace 的 js 注入。

- moonberry

---

我不认为随着我在开发过程中添加越来越多的链接，它能适应自动化。如果我知道在 index.html 中首先注入了什么，那么它可以工作。但是如果我添加更多，它将在过程中多次失败。我仍然有更多的脚本要添加到项目中。该过程必须将它们视为动态元素。 - Kobibr

您可以控制注入的顺序，查看编辑。 - moonberry

这看起来比使用gulp-print奇怪的bug更加健壮。我会尝试一下，如果它也有效，我会验证你的答案。对于那些遇到这个问题的人，只需在gulp-file-sort处理之后尝试排序即可。如果在之前进行排序，它将会出错。gulp-inject似乎不支持管道队列或恢复管道，并且需要完整的管道。这可能是解决方案。我明天会再次审查它。gulp-file-sort-->在此处进行修改-->gulp-inject - Kobibr

Answer 3

不要问我为什么它能工作。gulp-print 做了一件本不该做的奇怪事情（非常方便）。

我编写了以下函数以查看管道输出：

var plugins = require('gulp-load-plugins')();

pipes.testingShit = function() {
  return plugins.print(function(filepath) {
    return "built: " + filepath;
  });
};

然后我修改了以下函数以进行调试，这样你就有奇迹了。

来自:

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

到:

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

插件gulp-print本应在终端中打印输出，但出于某种原因，它正在反转管道。这是一件奇怪的事情，我现在无法解释。

- Kobibr