对 grunt-contrib-connect 提供的文件应用 gzip 压缩答案

【问题标题】：Applying gzip compression to files served by grunt-contrib-connect对 grunt-contrib-connect 提供的文件应用 gzip 压缩
【发布时间】：2015-01-15 13:09:35
【问题描述】：

这很简单：我想在将网站部署到 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 开发工具查看网络请求时，我可以看到连接网络服务器提供的任何文件都没有应用压缩。我做错了什么？

【问题讨论】：

嗯...奇怪，第二个例子看起来应该是正确的（第一个不是）。抱歉，我不确定还有什么问题。
找到了解决方案！在 grunt-contrib-connect 任务中，如果您向 middleware 提供 Array，它将完全用您提供的中间件替换默认中间件。但是，如果您将 middleware 选项指定为 function，它会按预期工作（将中间件链接到默认中间件）：中间件：函数（连接，选项，中间件）{中间件.unshift（压缩（）） ;返回中间件； }
很高兴你找到它！您应该将此添加为您自己问题的答案并接受它，这将有助于其他人在需要时找到答案。

标签： gruntjs compression gzip connect

【解决方案1】：

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

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

【讨论】：

添加了 OP 对问题的评论作为答案。无论如何，它是正确的答案。这有助于将问题标记为已回答。
我相信 livereload 与压缩不兼容。但是，这在其他情况下有效。

【解决方案2】：

不确定这是否对任何人都有帮助，但我很难弄清楚上面只使用compression() 的地方该怎么做。我认为这是动态压缩文件的函数的简写。由于我没有找到任何看起来可以告诉我如何做到这一点的信息，我只是使用grunt-contrib-compress 将我的所有文件压缩到一个新目录中。

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 需要关闭，因为这会导致事情失败。

【讨论】：