Gulp 4 `series` 不同步完成任务

Question

我有一堆目标/品牌应用程序，我正在为其创建构建例程。基本概念是我称之为gulp iosBuild --target app1 之类的东西，各种文件/文件夹将在编译之前进行调整/移动。我似乎有点愚蠢，因为编译步骤在文件/文件夹调整位完成之前就开始了。在进入谷歌洞后，我拼凑了以下内容。谁能告诉我我做错了什么？

// fetch command line arguments
const arg = (argList => {
  let arg = {}, a, opt, thisOpt, curOpt;
  for (a = 0; a < argList.length; a++) {
    thisOpt = argList[a].trim();
    opt = thisOpt.replace(/^\-+/, '');
    if (opt === thisOpt) {
      // argument value
      if (curOpt) arg[curOpt] = opt;
      curOpt = null;
    } else {
      // argument name
      curOpt = opt;
      arg[curOpt] = true;
    }
  }
  return arg;
})(process.argv);

gulp.task('clean-ios', () => {
  return gulp.src(['App_Resources/iOS/*.xcassets', 'platforms/ios/build/*.*'], { read: false })
    .pipe(clean());
});

// various items that are specific to each branded app
const iosConfigs = [
  {
    name: 'app1',
    bundleName: 'Sample App',
    profile: 'xxxx-xxxx-xxxx',
    appcenterId: 'xxxx-xxxx-xxxx'
  },
  {
    name: 'app2',
    bundleName: 'Sample App2',
    profile: 'xxxx-xxxx-xxxx',
    appcenterId: 'xxxx-xxxx-xxxx'
  },
  {
    name: 'app3',
    bundleName: 'Sample App3',
    profile: 'xxxx-xxxx-xxxx',
    appcenterId: 'xxxx-xxxx-xxxx'
  }
];

// Google told me to do this
function build(done) {

  const setupTasks = iosConfigs.map(config => {
    log(arg);
    if (arg.target !== config.name) {
      log('no match'); // if called with --target app2, return no-ops for app1,app3, etc
      return (taskDone) => {
        taskDone();
      }
    } else
      return (taskDone) => {


        gulp
          .src('src/main.tns.template.ts')
          .pipe(replace('%appcenterid%', config.appcenterId))
          .pipe(rename('main.tns.ts'))
          .pipe(gulp.dest('src'));

        gulp
          .src('package.json')
          .pipe(replace(/(com\.acme\.)([^"]+)"/, '$1' + config.name + '"'))
          .pipe(gulp.dest('.'));

        gulp
          .src('src/app/core/config/app.config.tns.ts')
          .pipe(replace(/(https:\/\/)[^.]+(\.acme\.com)/, '$1' + config.name + '$2'))
          .pipe(gulp.dest('src/app/core/config'));

        gulp
          .src('targets/' + config.name + '/build.xcconfig')
          .pipe(gulp.dest('App_Resources/iOS'));

        gulp
          .src('targets/' + config.name + '/email_logo.png')
          .pipe(rename('brandicon.png'))
          .pipe(gulp.dest('App_Resources/iOS'));

        gulp
          .src('targets/' + config.name + '/*.scss')
          .pipe(gulp.dest('src/styles'));

        gulp
          .src('targets/' + config.name + '/Assets.xcassets/**/*.*', { base: 'targets/' + config.name })
          .pipe(gulp.dest('App_Resources/iOS'));

        taskDone();
      }
  });

  const buildTasks = iosConfigs.map(config => {
    log(arg);
    if (arg.target !== config.name) {
      log('no match');
      return (taskDone) => {
        taskDone();
      }
    } else {
      return (taskDone) => {
        log('running runner');
        run('tns build ios --release --for-device --env.production=true --bundle --env.aot --provision=' + config.profile).exec(config.name, () => {
          log('build done');
        });
        taskDone();
      }
    }
  });

// my expectation is that everything in 'setupTasks' will complete before 'buildTasks' is called... doesn't happen that way though
  return gulp.series('clean-ios', ...setupTasks, ...buildTasks, (seriesDone) => {
    seriesDone();
    done();
  })();
}

exports.iosBuild = build;

Answer 1

是的，您无需等待所有异步设置任务的完成。

return (taskDone) => {
  gulp
    .src('src/main.tns.template.ts')
    .pipe(...)

  gulp
    .src('package.json')
    .pipe(...);

  ...

  taskDone(); // will be executed before any of above streams
}

您可以尝试重写此逻辑以使用gulp.parallel 可组合函数，例如：

return gulp.parallel(
    () => gulp
        .src('src/main.tns.template.ts')
        .pipe(...),
    () => gulp
        .src('package.json')
        .pipe(...),
    ...
)

这是完整的setupTasks 代码：

const setupTasks = iosConfigs.map(config => {
  log(arg);
  if (arg.target !== config.name) {
    log('no match'); // if called with --target app2, return no-ops for app1,app3, etc
    return (taskDone) => {
      taskDone();
    }
  } else
    return gulp.parallel(
      () => gulp
        .src('src/main.tns.template.ts')
        .pipe(replace('%appcenterid%', config.appcenterId))
        .pipe(rename('main.tns.ts'))
        .pipe(gulp.dest('src')),
      () => gulp
        .src('package.json')
        .pipe(replace(/(com\.acme\.)([^"]+)"/, '$1' + config.name + '"'))
        .pipe(gulp.dest('.')),
      () => gulp
        .src('src/app/core/config/app.config.tns.ts')
        .pipe(replace(/(https:\/\/)[^.]+(\.acme\.com)/, '$1' + config.name + '$2'))
        .pipe(gulp.dest('src/app/core/config')),
      () => gulp
        .src('targets/' + config.name + '/build.xcconfig')
        .pipe(gulp.dest('App_Resources/iOS')),
      () => gulp
        .src('targets/' + config.name + '/!*.scss')
        .pipe(gulp.dest('src/styles')),
      () => gulp
        .src('targets/' + config.name + '/Assets.xcassets/!**!/!*.*', {base: 'targets/' + config.name})
        .pipe(gulp.dest('App_Resources/iOS'))
    )
});

Answer 2

正如@yurzui 提到的问题是，您的代码没有等待 setupTasks 中指定的所有 gulp 子任务完成并早先执行 taskDone。将您的 setupTasks 函数更新为：

const setupTasks = iosConfigs.map(config => {
  log(arg);
  if (arg.target !== config.name) {
    log('no match'); // if called with --target app2, return no-ops for app1,app3, etc
    return (taskDone) => {
      taskDone();
    }
  } else {
    return (taskDone) => {
      const task1 = () => gulp
        .src('src/main.tns.template.ts')
        .pipe(replace('%appcenterid%', config.appcenterId))
        .pipe(rename('main.tns.ts'))
        .pipe(gulp.dest('src'));

      const task2 = () => gulp
        .src('package.json')
        .pipe(replace(/(com\.acme\.)([^"]+)"/, '$1' + config.name + '"'))
        .pipe(gulp.dest('.'));

      const task3 = () => gulp
        .src('src/app/core/config/app.config.tns.ts')
        .pipe(replace(/(https:\/\/)[^.]+(\.acme\.com)/, '$1' + config.name + '$2'))
        .pipe(gulp.dest('src/app/core/config'));

      const task4 = () => gulp
        .src('targets/' + config.name + '/build.xcconfig')
        .pipe(gulp.dest('App_Resources/iOS'));

      const task5 = () => gulp
        .src('targets/' + config.name + '/email_logo.png')
        .pipe(rename('brandicon.png'))
        .pipe(gulp.dest('App_Resources/iOS'));

      const task6 = () => gulp
        .src('targets/' + config.name + '/*.scss')
        .pipe(gulp.dest('src/styles'));

      const task7 = () => gulp
        .src('targets/' + config.name + '/Assets.xcassets/**/*.*', {
          base: 'targets/' + config.name
        })
        .pipe(gulp.dest('App_Resources/iOS'));

      return gulp.series( //gulp.parallel
        task1,
        task2,
        task3,
        task4,
        task5,
        task6,
        task7
      )(taskDone);
    }
  }
});