あらすじ
- cssとかjsをGZip化したいぜ～
- grunt-contrib-compressでGZip生成できたぜ～
- grunt-contrib-connectで、1のcssとjsを読み込んだhtml閲覧してみるぜ～
- 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