Control order of source files

问题:

I'm using Gulp and the main-bower-files to bundle my bower dependencies.

I need to ensure that jQuery is included before AngularJS, but since the Angular bower package does not actually depend on jQuery it is included after.

Is there a way to push jQuery to the top of source list or override Angular's dependency so it does require jQuery?

I tried using the gulp-order plugin to do this but it messes up the original order of the remaining files:

gulp.task('bower', function () {

  var sources = gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js'])); // don't include min files

  return sources
    // force jquery to be first
    .pipe(plugins.order([
      'jquery.js',
      '*'
    ]))
    .pipe(plugins.sourcemaps.init())
      .pipe(plugins.concat('libs.min.js'))
      .pipe(plugins.uglify())
    .pipe(plugins.sourcemaps.write('./'))
    .pipe(gulp.dest(config.output))
    .pipe(plugins.notify({ message: 'Bower task complete' }));
});

回答1:

I haven't used main-bower-files but one trick I can think of is to just include the jquery file directly and don't load it in the main bower files array, e.g.

var glob = ['/path/to/jquery.js'].concat(mainBowerFiles(['**/*.js', '!/path/to/jquery.js']));
var sources = gulp.src(glob);

回答2:

You can override angulars dependencies in your project bower.json:

https://github.com/ck86/main-bower-files#overrides-options

{
    ...

    "overrides": {
        "angular": {
            "dependencies": {
                "jquery": "~1.8"
            }
        }
    }
}