如何配置 gulpjs 使得 ngrok 模块可用于为 pagespeed 洞察插件提供 url？

Posted 2023-04-18

【中文标题】如何配置 gulpjs 使得 ngrok 模块可用于为 pagespeed 洞察插件提供 url？

【英文标题】：How to configure gulpjs such that, the ngrok module can be used to serve url for pagespeed insight plugin?

【发布时间】：2016-07-05 19:31:17

【问题描述】：

这是我的货币文件夹结构：

|-src |-dist |-gulpjs.js

在我的 gulpjs 文件中，我根据here 中的建议分别为移动设备和桌面设备创建了两个任务 -

gulp.task('mobile', function () 
  return ngrok.connect(4000, function (err, url) 
    psi(url, 
        nokey: 'true',
        strategy: 'mobile',
      ).then(function (data) 
          console.log('Speed score: ' + data.ruleGroups.SPEED.score);
          console.log('Usability score: ' + data.ruleGroups.USABILITY.score);
      );
  );
);

gulp.task('desktop', function () 
  return ngrok.connect(4000, function (err, url) 
    psi(url, 
          nokey: 'true',
          strategy: 'desktop',
      ).then(function (data) 
          console.log('Speed score: ' + data.ruleGroups.SPEED.score);
      );
  );
);

当我运行 gulp 移动或 gulp 桌面任务时，它确实在日志中给了我速度分数，但我不确定 URL 是从 src 还是从 dist 文件夹生成的。 有没有更好的方法来实现我想要的（我想要为我的本地环境评分的页面速度）？

【参考方案1】：

您可以使用swank 为您的 dist 文件夹提供 ngrok：

// Serve dist folder
gulp.task('serve', function(cb)
    swank(
        watch: false,
        path: 'dist',
        log: false,
        port: 4000
    ).then(function(s)
    console.log('Server running: '+s.url);
    cb();
  );
);

// PageSpeed task
gulp.task('psi-mobile', function() 
   return ngrok.connect(4000, function (err_ngrok, url) 
     console.log(('ngrok'), '- serving your site from', (url));
     pageSpeed.output(url, 
       strategy: ['mobile'],
       threshold: 80
     , function (err_psi, data) 
       if (err_psi) 
         log(err_psi);
         process.exit(1);
      
      process.exit(0);
    );
  );
);

// Run PSI on tunnel URL
gulp.task('mobile', gulpSequence('serve', 'psi-mobile'));