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

Question

当我使用gulp watch-dev 构建时，我的角度页面上有以下脚本（gulpfile.js 位于 sn-p 中问题的末尾）。

<!-- 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。 这是我在 sn-p 中的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

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

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

Answer 2

使用 gulp 包 gulp-html-replace 来订购 js 声明

更多细节

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

EDIT gulp-html-replace 如果您想要缩小/连接的 js 文件，会提供很大的帮助。使用串联，您可以分离供应商 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，使用类似的js注入如gulp-html-replace似乎可以解决你的问题

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 应该在终端中打印输出，原因我不知道是反转管道。这是一件奇怪的事情，我现在无法解释。