将gzip压缩应用于由grunt-contrib-connect提供的文件

Question

很简单：我想在将网站部署到Apache之前，使用grunt-contrib-connect模拟网页大小。

对于Apache来说，打开gzip压缩非常简单。但是，在grunt-contrib-connect中，我还没有找到使它起作用的方法。这是我在Gruntfile.js中尝试过的：

var compression = require('compression');

...
// The actual grunt server settings
connect: {
  dev: {
    options: {
      open: false,
      base: 'dev',
      port: '4000',
      hostname: 'localhost',
      livereload: 35729,
      onCreateServer: [compression()]
    }
  }
}

我也尝试了以下方法：

connect: {
  dev: {
    options: {
      open: false,
      base: 'dev',
      port: '4000',
      hostname: 'localhost',
      livereload: 35729,
      middleware: [compression()]
    }
  }
}

我能正确提供文件，但当我使用Chrome开发工具查看网络请求时，我发现连接Web服务器提供的任何文件都没有应用压缩。我做错了什么？

- uglow

---

嗯...奇怪，第二个例子看起来应该是正确的（第一个不正确）。抱歉，但我不确定还有什么别的问题。 - Jordan Kasper

找到解决方案了！在grunt-contrib-connect任务中，如果您向middleware提供一个Array，它将完全用您提供的内容替换默认的中间件。但是，如果您将middleware选项指定为function，它将按预期工作（将您的中间件链接到默认中间件）： middleware: function(connect, options, middlewares) { middlewares.unshift(compression()); return middlewares; } - uglow

很高兴你找到了答案！你应该将其作为自己问题的答案并接受它，这将有助于其他人在需要时找到答案。 - Jordan Kasper

Answer 1

在grunt-contrib-connect任务中，如果您向middleware提供一个Array，则它将完全用您提供的内容替换默认的middleware。但是，如果您将middleware选项指定为函数，则它将按照您预期的方式工作（将您的middleware链接到默认的middleware）。

middleware: function(connect, options, middlewares) { 
    middlewares.unshift(compression()); 
    return middlewares; 
}

- Vishwanath

---

将OP的评论添加为问题的答案。无论如何，这是正确的答案。这有助于标记问题已得到解答。 - Vishwanath

我认为livereload与压缩不兼容。但是，除此之外它是有效的。 - jwal

Answer 2

不确定这会不会帮助任何人，但我难以弄清楚在上面仅使用compression()的情况下该做什么。 我假设那是一个缩小文件的函数的速记。由于我没有找到任何看起来像是告诉我如何做到这一点的信息，因此我只是使用grunt-contrib-compress将所有文件压缩成一个新目录中的gzip。

Gruntfile条目：

compress: {
  dist: {
    options: {
      mode: 'gzip'
    },
    expand: true,
    cwd: 'dist/',
    src: ['**/*'],
    dest: 'dist_compress/'
  }
}

然后我为connect添加了一个新的服务器条目，并添加了一个小型中间件函数来更改Content-Encoding头。这使我能够启用gzip进行本地性能测试。

Gruntfile 条目：

connect: {

  server_gzip: {
    options: {
      port: 9004,
      livereload: false,
      base: 'dist_compress',
      middleware: function(connect, options, middlewares) {
        middlewares.unshift(function(req, res, next) { 
          res.setHeader('Content-Encoding', 'gzip');
          return next(); 
          });

        return middlewares;
      },
    }
  }
}

请注意关闭livereload，因为它会导致一些问题失败。

- nwalton