如何使用 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在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

在您的 gulp 生成文件的脚本中，指定您的 *.module.js 优先于其他 *.js 文件。

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

Answer 2

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

更多详情

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

如果你想要 minified/concatenated js 文件，

EDIT 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，似乎它可以解决你的问题使用类似的 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 出于我不知道的原因正在反转管道。这是一件奇怪的事情，我现在无法解释。

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

How to reverse angular script order injection with gulp?

javascript

angularjs

gulp

development-environment

gulp-inject