Mamp - Getting Gzip to work - php

Question

How do you get gzip to work on a Wordpress site setup in MAMP?
I've got gulp creating the file /dist/css/main.css.gz and have added it to the header PHP file of my wordpress site.
I then lose all of my styling. I'm assuming this is because I haven't enabled it in my .htaccess? So I found the following code to add to my .htaccess:
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
And it still does not work.

Answer 1

I'm not sure why you'd want to store your files as gzip archives, but this is not the way to do it. AddOutputFilterByType DEFLATE text/css will compress the file before sending it. To decompress an existing file, something like this will work (tested with 2.2):
<Directory />
AddOutputFilter INFLATE gz
RemoveType .gz
AddType text/css .css.gz
</Directory>
Test output:
$ echo "body {color:black; background:white;}" > foo.css
$ gzip foo.css
$ curl http://localhost/foo.css.gz
body {color:black; background:white;}
$ curl -I http://localhost/foo.css.gz
HTTP/1.1 200 OK
Date: Fri, 07 Jul 2017 23:01:22 GMT
Server: Apache/2.2.15 (Scientific Linux)
Last-Modified: Fri, 07 Jul 2017 22:59:22 GMT
Content-Length: 38
Content-Type: text/css
$
Of course, this interferes with your ability to serve actual gzip files, and you'll need to manually specify MIME types for each compressed file.
Also, if you're controlling the server you should not be using .htaccess files. They're slow and present a security risk. Put this in the server configuration!