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

Question

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

|-src
|-dist
|-gulpjs.js

在我的 gulpjs 文件中，我为移动设备和桌面设备分别创建了两个任务，如下所示-

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 mobile 或 gulp desktop 任务时，它确实在日志中给了我速度分数，但我不确定 URL 是从 src 还是从 dist 文件夹生成的。有没有更好的方法来实现我想要的（我想要为我的本地环境评分的页面速度）？

Answer 1

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

// 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'));