javascript - 使用 gulp 和 main-bower-files 对输出进行排序(gulp-order 不起作用)

Question

这里是 Java 工程师，刚接触 Javascript 世界，如果我没有提供足够/正确的信息，请深表歉意!

我有一个 gulp 构建脚本并使用 bower 来管理我的 JS 前端应用程序的依赖项。我正在努力以正确的顺序连接(bower 控制的) vendor javascript 库，以便 jQuery 和 angular 排在第一位。

如果它们不是第一个，那么当我加载我的应用程序时，我得到 angular is undefined 或 jQuery is undefined，因为它们相应的 javascript 代码被埋在更深的地方串联库。

我曾尝试使用 gulp-order 对生成的 main-bower-files 调用的输出进行排序，但它似乎没有任何效果。

我的 gulp 任务如下:

gulp.task('lib', function () {
    var files =
      gulp.src(mainBowerFiles({
        paths: {
          bowerrc: './.bowerrc',
          bowerJson: './bower.json'
        }, env: 'lib'}))
      .pipe(order(["vendor/bower/jquery/**/*.js", "vendor/bower/angular/**/*.js", "vendor/bower/**/*.js" ]))

  return processJsFiles('lib', files);
});

processJsFiles 做丑化工作，看起来很像:

        .pipe(uglify(name + '.js', {
            outSourceMap: true,
            screwIe8: true,
            compress: {
              hoist_funs: false,
              if_return: false
            }
        }))
        .pipe(gulp.dest(build_dir))
        .pipe(gzip())
        .pipe(gulp.dest(build_dir));

我应该这样做的任何线索或更好的方法？

Answer 1

在深入研究文档后，我发现您需要指定订单插件需要从哪里开始的基础，例如:

gulp.task('lib', function () {
    var files =
      gulp.src(mainBowerFiles({
        paths: {
          bowerrc: './.bowerrc',
          bowerJson: './bower.json'
        }, env: 'lib'}))
      .pipe(order([
          "vendor/bower/jquery/**/*.js", 
          "vendor/bower/angular/**/*.js", 
          "vendor/bower/**/*.js" 
          ], { base: './' })
      );

  return processJsFiles('lib', files);
});