如何使用 Gulp 订购注入的文件？答案

【问题标题】：How to order injected files using Gulp?如何使用 Gulp 订购注入的文件？
【发布时间】：2015-06-15 09:17:55
【问题描述】：

MyAngular 应用程序具有以下结构

- src/app/main/
    |
    -main.js
    -main.controller.js
    -index.html

我正在使用 Gulp。构建完成后，*.js 文件在index.html 中以错误的顺序注入。文件main.js依赖于main.controller.js，所以main.controller.js必须在main.js之前注入。

<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<script src="app/main/main.js"></script>
<script src="app/main/main.controller.js"></script>
<script src="app/index.js"></script>
<!-- endinject -->

这是我的gulpfile.js

'use strict';

var gulp = require('gulp');
var gutil = require('gulp-util');
var wrench = require('wrench');

var options = {
  src: 'src',
  dist: 'dist',
  tmp: '.tmp',
  e2e: 'e2e',
  errorHandler: function(title) {
    return function(err) {
      gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
      this.emit('end');
    };
  },
  wiredep: {
    directory: 'bower_components',
    exclude: [/jquery/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/]
  }
};

wrench.readdirSyncRecursive('./gulp').filter(function(file) {
  return (/\.(js|coffee)$/i).test(file);
}).map(function(file) {
  require('./gulp/' + file)(options);
});

gulp.task('default', ['clean'], function () {
    gulp.start('build');
});

【问题讨论】：

它不仅特定于 angularjs 项目，它可以适用于任何 js 项目。一种解决方案是使用gulp.src([ 'main.js', 'main.controller.js', 'some_folder/*.js, 'some_other/**/*.js''])

标签： javascript angularjs gulp

【解决方案1】：

在您的 inject.js 中使用 gulp-angular-filesort

https://www.npmjs.com/package/gulp-angular-filesort

为了正常工作，每个 Angular 文件都需要有一个唯一命名的模块和设置器语法（带括号），即 angular.module('myModule', []).

inject.js 示例：

module.exports = function(options) {
  gulp.task('inject', ['scripts', 'styles'], function () {
    var injectStyles = gulp.src([
      options.tmp + '/serve/app/**/*.css',
      '!' + options.tmp + '/serve/app/vendor.css'
    ], { read: false });

    var injectScripts = gulp.src([
      options.src + '/app/**/*.js',
      '!' + options.src + '/app/**/*.spec.js',
      '!' + options.src + '/app/**/*.mock.js'
    ])
    .pipe($.angularFilesort()).on('error', options.errorHandler('AngularFilesort'));

    var injectOptions = {
      ignorePath: [options.src, options.tmp + '/serve'],
      addRootSlash: false
    };

    return gulp.src(options.src + '/*.html')
      .pipe($.inject(injectStyles, injectOptions))
      .pipe($.inject(injectScripts, injectOptions))
      .pipe(wiredep(options.wiredep))
      .pipe(gulp.dest(options.tmp + '/serve'));

  });
};

【讨论】：

这不适用于 ES2015+ 代码，因为 angular-file-sort 解析整个源文件并且它们不支持解析 ES2015+，因为 this issue

【解决方案2】：

首先在 Gulp 源数组中定义重要的 js 文件对我有用：

var target = gulp.src('app/index.html');
var sources = gulp.src(['app/scripts/core/app.js','app/scripts/**/*.js'], {read: false});
target.pipe(inject(sources, {})).pipe(gulp.dest('app'));

【讨论】：

在某种程度上违背了文件注入的目的，即在 gulpfile 中按顺序指定文件。然后，您必须在添加新文件时更改 gulpfile，这是您一开始就试图避免的。

【解决方案3】：

我通过使用gulp-natural-sort 和stream-series 模块解决了这个问题。 gulp-natural-sort 以一致的顺序排列您的文件，stream-series 采用多个文件流并将一个放在另一个之前。

我的代码如下所示：

var series = require('stream-series');
var naturalSort = require('gulp-natural-sort');

gulp.task('inject', function() {
    log('Injecting custom scripts to index.html');

    var theseComeFirst = gulp.src(["somepath/first*.js", {read: false}).pipe(naturalSort());

    var theseComeSecond = gulp.src("somepath/second*.js", {read: false}).pipe(naturalSort());

    return gulp
        .src("*.html")
        .pipe($.plumber({errorHandler: handleError}))
        .pipe($.inject(series(theseComeFirst, theseComeSecond), {relative: true}))
        .pipe(gulp.dest('client/'));
});

您可以只使用流系列，只要您不在乎其他是否按顺序排列即可。不幸的是，inject() 每次运行时都会以某种随机顺序将文件放在一个系列组中，这给了我 heebee jeebees。

【讨论】：