Gruntjs 对grunt contrib connect提供的文件应用gzip压缩

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

使用Apache，打开gzip压缩非常简单。然而，使用grunt contrib connect，我还没有找到一种方法使其工作。以下是我到目前为止在Grunfile.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()]
    }
  }
}

---

我可以正确地提供文件，但是当我使用chromedev工具查看网络请求时，我可以看到没有对connectwebserver提供的任何文件应用压缩。我做错了什么？

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

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

---

不确定这是否对任何人都有帮助，但我很难弄清楚在上面只使用

compression（）的地方该怎么做

。我想这是一个可以动态压缩文件的函数的简写。因为我没有找到任何信息，看起来它可以告诉我如何进行压缩，所以我只是将所有文件压缩到一个新目录中

GrunFile条目：

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

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;
      },
    }
  }
}

然后，我为

connect

添加了一个新的服务器条目，带有一个小的中间件函数来更改

内容编码

头。这允许我在启用gzip的情况下进行本地性能测试

GrunFile条目：

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

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

Hmm…奇怪的是，第二个示例看起来应该是正确的（第一个示例不是）。抱歉，但我不确定还有什么问题。找到了解决方案！在grunt contrib connect任务中，如果您向

中间件提供
阵列
，它将完全用您提供的替换默认中间件。但是如果您将
中间件
选项指定为
函数
，它将正常工作expect（将中间件链接到默认中间件）：中间件：函数（连接、选项、中间件）{middleware.unshift（compression（））；return middleware；}很高兴您找到了它！您应该将此作为您自己问题的答案添加并接受它，这将有助于其他人在需要时找到答案。将OP的评论添加到问题中作为答案。无论如何，这是正确的答案。这有助于将问题标记为已回答。我相信livereload与压缩不兼容。但是，这是可行的否则。