minify CSS and JS with PHP in Wordpress server side

Question

I'm looking to add this to my framework to optimise it further. I don't want to use a plugin and I want the code to be as light weight as possible. This is the code I have so far. This works if I only call "style.css" but if I call the other files it doesn't minify the files. I'm getting the same with the js file I have. It removes the white space but it doesn't fully minify the file. Hope someone can help. Thanks

    <?php

$dev_master_root = dirname(dirname(dirname(dirname(dirname(__FILE__)))));
if ( file_exists( $dev_master_root.'/wp-load.php' ) ) {
    require_once( $dev_master_root.'/wp-load.php' );
} elseif ( file_exists( $dev_master_root.'/wp-config.php' ) ) {
    require_once( $dev_master_root.'/wp-config.php' );
}  

/* Add your CSS files to this array (THESE ARE ONLY EXAMPLES) */
$cssFiles = array(
  "../style.css",
  "global.css",
  "slicknav.css"
);

$buffer = "";
foreach ($cssFiles as $cssFile) {
  $buffer .= file_get_contents($cssFile);
}

// Remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);

// Remove space after colons
$buffer = str_replace(': ', ':', $buffer);

// Remove whitespace
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);

// Enable GZip encoding.
ob_start("ob_gzhandler");

// Enable caching
header('Cache-Control: public');

// Expire in one day
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');

// Set the correct MIME type, because Apache won't set it for us
header("Content-type: text/css");

// Write everything out
echo($buffer);

?>

Section of output with the minify file exactly as above.

    body {
    color: #2d2e32;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 21px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 12px;
}

h6 {
    font-size: 11px;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.618;
    margin-bottom: 20px;
}

p {
    font-family: 'Domine', serif;
    font-size: 12px;
}

#dev-master-main-container {}

#dev-master-header-container {
    background: #fff;
}

#dev-master-content-container {}

#dev-master-footer-container {
    background: #000026;
}

#dev-master-footer-content {}

@media screen and (max-width :1180px) {}

@media screen and (max-width :960px) {}

@media screen and (max-width :768px) {}

@media screen and (max-width :524px) {}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

article, aside, details, figcaption, figure, footer, header, main, menu,
nav, section, summary {
    display: block;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden], template {
    display: none;
}

a {
    background-color: transparent;
}

a:active, a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

This is the output when only style.css is called using the minify file. i.e when I remove "global.css" and "slicknav.css"

h1,h2,h3,h4,h5,h6 {}p {}#dev-master-main-container {}#dev-master-header-container {background:#fff;}#dev-master-content-container {}#dev-master-footer-container {background:#000026;}#dev-master-footer-content {}@media screen and (max-width :1180px) {}@media screen and (max-width :960px) {}@media screen and (max-width :768px) {}@media screen and (max-width :524px) {}

So in the code above, this is only style.css but you can see all comments etc are being stripped. It's super light weight because all the foundation styles are called from global.css

I have just noticed the spaces in this code which I would also like to remove. I thought the string above would have done that...?

Let me know if you need any more info. Thanks again

score 2 · Answer 1 · answered Aug 10 '15 at 11:37

2

Are you referencing the file locations correctly in the array?

Also with the current code you have it is not going to perform a full minification because that involves switching out variable names for shorter ones e.g (someVariableName would become a)

answered Aug 10 '15 at 11:37

DGS

6,015
1
21
37

in addition of this answer, I advice to read this : http://stackoverflow.com/questions/12769982/reference-what-does-this-error-mean-in-php/12772851#12772851 – mmm Aug 10 '15 at 11:41
Thanks for your reply, I think I'm referencing them correctly. "style.css" is in the main theme directory (as per Wordpress standards) and the other css files are in a folder of "css" the code above is also in the "css" folder. It will minify "style.css" if I remove the other files but it wont do them all together. I'm mainly looking to concatenate all the files into one and just serve the one minified file. is it worth me putting up the output code? or a sample of it? Thanks – user77394 Aug 10 '15 at 13:46
Yeah a sample of the output would be helpful, both with and without all scripts included – DGS Aug 10 '15 at 14:13

minify CSS and JS with PHP in Wordpress server side

1 Answers1