Posted at

grunt-contrib-connectでGZip対応

More than 3 years have passed since last update.


あらすじ


  1. cssとかjsをGZip化したいぜ~

  2. grunt-contrib-compressでGZip生成できたぜ~

  3. grunt-contrib-connectで、1のcssとjsを読み込んだhtml閲覧してみるぜ~

  4. gzipが読み込まれないぜよ?!

ってなことがありまして。

grunt-contrib-connectのoptionをアレコレ調べましたら、なんかGZip対応できたっぽいのでソースさらしておきます。


環境


  • OS: Windows7

  • Node.js: v0.10.8

  • grunt-contrib-connect: v0.9.0

    バージョンが古いと引数middlewaresの情報がわたってこないので注意。


その他注意


  • ※GZipファイルを生成する際、.gzの前にファイルの拡張子を残しておくことが前提となります。その拡張子でContent-typeを割り当ててるので。

  • ※そもそもブラウザがGZipファイル対応している場合に限ります。

module.exports = function(grunt) {

var compression = require('compression');

grunt.initConfig({
connect: {
options: {
port: 8000, //ここはご自由に
hostname: '*', //ここはご自由に
middleware: function(connect, options, middlewares) {

// gzip対応
// Content-typeの振り分けは、リクエストURL名から判定
function gzipFilter(req, res) {
var url = req.url;

// リクエストURLに.jz.gzが含まれる場合
if (url.indexOf('.js.gz') > -1) {
res.setHeader('Content-Encoding', 'gzip');
res.setHeader('Content-Type', 'text/javascript');
// リクエストURLに.css.gzが含まれる場合
} else if (url.indexOf('.css.gz') > -1) {
res.setHeader('Content-Encoding', 'gzip');
res.setHeader('Content-Type', 'text/css');
// リクエストURLに.html.gzが含まれる場合
} else if (url.indexOf('.html.gz') > -1) {
res.setHeader('Content-Encoding', 'gzip');
res.setHeader('Content-Type', 'text/html');
}

if (req.headers['Content-Encoding'] === 'gzip') {
return compression.filter(req, res);
} else {
return false;
}
}

middlewares.unshift(
compression({filter: gzipFilter})
);

return middlewares;
}
},

//ここはご自由に
hoge: {
options: {
base: './hoge_root'
}
}
}
});

grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect:hoge']);
};

でも、livereloadと同時に使うことができませんでした。なんぞ。。。

当方、サーバーサイドの知識に明るくないので、お問い合わせもらっても答えられない気がします。。


動いた一例として参考にしていただければと。。。m(_ _)m


参考URL