阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Gulp task 任务顺序执行,适合顺序执行

      组合任务

      Gulp 提供了两个强大的组合方法: series()parallel(),允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务(task)函数或已经组合的操作。series()parallel() 可以互相嵌套至任意深度。

      series() 序列执行(适合顺序执行)

      如果需要让任务(task)按顺序执行,请使用 series() 方法。

      简单例子

      const { series } = require('gulp');
      
      function transpile(cb) {
          // body omitted
          console.log('axihe-001');
      
          cb();
      }
      
      function bundle(cb) {
          // body omitted
          console.log('axihe-002');
          cb();
      }
      
      exports.default = series(transpile, bundle);
      

      可以看到运行结果是先打印axihe-001,然后打印axihe-002

      https://a.axihe.com/npm/gulp/mintty_ASfWrjtTWu.png

      上面这个例子,可能不直观,再举一个例。

      模拟真实例子

      真实项目中,每一个任务多久可以完成,其实是一个未知的,下面用 sleep 来模拟消耗的时间。

      对下面sleep不了解的,可以参考本人写的博文 JavaScript sleep 实现

      const { series } = require('gulp');
      
      function sleep(time) {
          return new Promise((resolve) => setTimeout(resolve, time));
      }
      
      async function html(cb) {
          // body omitted
          await sleep(1000);
          console.log('axihe---html');
          cb();
      }
      
      async function css(cb) {
          // body omitted
          await sleep(500);
          console.log('axihe---CSS');
          cb();
      }
      
      async function javascript(cb) {
          // body omitted
          await sleep(250);
          console.log('axihe---javascript');
          cb();
      }
      exports.default = series(html, css, javascript);
      

      运行的结果如下:无论第一个html任务消耗多久,后面的 cssjavascript 任务,都要等待其完成后才能执行;

      注意观察完成时间Finished 'default' after 1.76 s,顺序执行和并发执行,时间耗费是一定不一样的。

      https://a.axihe.com/npm/gulp/mintty_u4eXQI6LmL.png

      目录
      目录