阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Gulp task 任务并行执行,适合高并发执行

      组合任务

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

      parallel() 并行,适合高并发执行

      对于希望以最大并发来运行的任务(tasks),可以使用 parallel() 方法将它们组合起来。

      const { series, parallel } = 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);
      exports.default = parallel(html, css, javascript);
      

      运行后的结果,会发现,javascript 因为运行时间短,先完成;而后是 css,最后是 html

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

      异步执行

      下面是异步执行的方式,注意setTimeout内的代码会异步执行,而不是上面 sleep 那种同步的。

      const { parallel } = require('gulp');
      
      function html(cb) {
          // body omitted
          setTimeout(() => {
              console.log('axihe---html');
          }, 1000)
          cb();
      }
      function css(cb) {
          // body omitted
          setTimeout(() => {
              console.log('axihe---css');
          }, 600)
          cb();
      }
      
      function javascript(cb) {
          // body omitted
          setTimeout(() => {
              console.log('axihe---javascript');
          }, 200)
          cb();
      }
      
      exports.default = parallel(html, css, javascript);
      

      结果如下

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

      换一种写法

      const { parallel } = require('gulp');
      function html(cb) {
          // body omitted
          setTimeout(() => {
              console.log('axihe---html');
              cb();
          }, 1000)
      }
      function css(cb) {
          // body omitted
          setTimeout(() => {
              console.log('axihe---css');
              cb();
          }, 600)
      }
      function javascript(cb) {
          // body omitted
          setTimeout(() => {
              console.log('axihe---javascript');
              cb();
          }, 200)
      }
      exports.default = parallel(html, css, javascript);
      

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

      https://a.axihe.com/npm/gulp/WX20200614-164623.png

      目录
      目录