2013-03-07 79 views
4

我在http://www.intert3chmedia.net/2011/12/minify-html-javascript-css-without.html上找到了這個腳本。它應該運行如下(不壓縮的類名稱所暗示的)HTML:WP HTML縮小類不工作

<?php 
class WP_HTML_Compression 
{ 
    // Settings 
    protected $compress_css = true; 
    protected $compress_js = true; 
    protected $info_comment = true; 
    protected $remove_comments = true; 

    // Variables 
    protected $html; 
    public function __construct($html) 
    { 
     if (!empty($html)) 
     { 
      $this->parseHTML($html); 
     } 
    } 
    public function __toString() 
    { 
     return $this->html; 
    } 
    protected function bottomComment($raw, $compressed) 
    { 
     $raw = strlen($raw); 
     $compressed = strlen($compressed); 

     $savings = ($raw-$compressed)/$raw * 100; 

     $savings = round($savings, 2); 

     return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$compressed.' bytes-->'; 
    } 
    protected function minifyHTML($html) 
    { 
     $pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si'; 
     preg_match_all($pattern, $html, $matches, PREG_SET_ORDER); 
     $overriding = false; 
     $raw_tag = false; 
     // Variable reused for output 
     $html = ''; 
     foreach ($matches as $token) 
     { 
      $tag = (isset($token['tag'])) ? strtolower($token['tag']) : null; 

      $content = $token[0]; 

      if (is_null($tag)) 
      { 
       if (!empty($token['script'])) 
       { 
        $strip = $this->compress_js; 
       } 
       else if (!empty($token['style'])) 
       { 
        $strip = $this->compress_css; 
       } 
       else if ($content == '<!--wp-html-compression no compression-->') 
       { 
        $overriding = !$overriding; 

        // Don't print the comment 
        continue; 
       } 
       else if ($this->remove_comments) 
       { 
        if (!$overriding && $raw_tag != 'textarea') 
        { 
         // Remove any HTML comments, except MSIE conditional comments 
         $content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content); 
        } 
       } 
      } 
      else 
      { 
       if ($tag == 'pre' || $tag == 'textarea') 
       { 
        $raw_tag = $tag; 
       } 
       else if ($tag == '/pre' || $tag == '/textarea') 
       { 
        $raw_tag = false; 
       } 
       else 
       { 
        if ($raw_tag || $overriding) 
        { 
         $strip = false; 
        } 
        else 
        { 
         $strip = true; 

         // Remove any empty attributes, except: 
         // action, alt, content, src 
         $content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content); 

         // Remove any space before the end of self-closing XHTML tags 
         // JavaScript excluded 
         $content = str_replace(' />', '/>', $content); 
        } 
       } 
      } 

      if ($strip) 
      { 
       $content = $this->removeWhiteSpace($content); 
      } 

      $html .= $content; 
     } 

     return $html; 
    } 

    public function parseHTML($html) 
    { 
     $this->html = $this->minifyHTML($html); 

     if ($this->info_comment) 
     { 
      $this->html .= "\n" . $this->bottomComment($html, $this->html); 
     } 
    } 

    protected function removeWhiteSpace($str) 
    { 
     $str = str_replace("\t", ' ', $str); 
     $str = str_replace("\n", '', $str); 
     $str = str_replace("\r", '', $str); 

     while (stristr($str, ' ')) 
     { 
      $str = str_replace(' ', ' ', $str); 
     } 

     return $str; 
    } 
} 

function wp_html_compression_finish($html) 
{ 
    return new WP_HTML_Compression($html); 
} 

function wp_html_compression_start() 
{ 
    ob_start('wp_html_compression_finish'); 
} 
add_action('get_header', 'wp_html_compression_start'); 
?> 

我的HTML在頂部IE條件語句,是這樣的:在IE條件語句下面

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]--> 
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]--> 
<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--> 

一切都是正確的精縮。結果是一行很長的HTML。問題在於IE條件以上的所有東西似乎都沒有被縮小。回車仍然保留。任何想法有什麼不對?

+0

你如何實際使用的微小函數/方法? – 2013-03-11 04:12:38

+0

是的。 IE條件不會被縮小。 – StackOverflowNewbie 2013-03-11 07:48:20

+0

你誤會了我。你在哪裏調用函數,你的html是什麼? – 2013-03-11 08:59:45

回答

2

該網站只是拿了代碼並重新命名了它。不知何故,使用「他們的」代碼比使用實際的插件更好?好吧。

有一個較新的版本都可以使用WordPress和標準的PHP: http://www.svachon.com/blog/html-minify/

+0

嗨史蒂文,你是腳本的原作者嗎? – StackOverflowNewbie 2013-05-15 23:47:57

+0

是的,我仍然保持它。 – 2013-05-27 23:00:15

2

自定義方法如何?

public static function html_compress($buffer) 
{ 
    $chunks = preg_split('/(<pre.*?\/pre>)/ms', $buffer, -1, PREG_SPLIT_DELIM_CAPTURE); 
    $buffer = ''; 
    $replace = array(
     '#[\n\r\t\s]+#'   => ' ', // remove new lines & tabs 
     '#>\s{2,}<#'    => '><', // remove inter-tag whitespace 
     '#\/\*.*?\*\/#i'   => '', // remove CSS & JS comments 
     '#<!--(?![\[>]).*?-->#si' => '', // strip comments, but leave IF IE (<!--[...]) and "<!-->"" 
     '#\s+<(html|head|meta|style|/style|title|script|/script|/body|/html|/ul|/ol|li)#' => '<$1', // before those elements, whitespace is dumb, so kick it out!! 
     '#\s+(/?)>#' => '$1>', // just before the closing of " >"|" />" 
     '#class="\s+#'=> 'class="', // at times, there is whitespace before class=" className" 
     '#(script|style)>\s+#' => '$1>', // <script> var after_tag_has_whitespace = 'nonsens'; 
    ); 
    $search = array_keys($replace); 
    foreach ($chunks as $c) 
    { 
     if (strpos($c, '<pre') !== 0) 
     { 
      $c = preg_replace($search, $replace, $c); 
     } 
     $buffer .= $c; 
    } 
    return $buffer; 
} 

GitHub repository

+0

這與課堂上正在做的事非常相似。這個腳本的來源是什麼?是否有單元測試? – StackOverflowNewbie 2013-03-11 11:42:05

+0

我在過去兩年一直在使用它。尚未進行單元測試。來源是互聯網和我自己的正則表達式。我創建了一個https://github.com/unamatasanatarai/HTMLCompress,您可以分叉 – 2013-03-11 11:59:00

+0

爲什麼用一個空格替換'#[\ n \ r \ t \ s] +#'?爲什麼'#> \ s {2,} <#'是這個「2或更多」而不是「1或更多」? – StackOverflowNewbie 2013-03-12 02:45:46

1

別的東西不對勁這裏。

我這個「類」減少爲單個頁面的PHP腳本(更換任何這 - $與非真(在高德的情況下)或靜態函數調用。

然後我跑了多種>調用的HTML測試,並嘗試使用條件註釋,其中包括複製粘貼到您以前有條件的<html>標籤中,每次輸出的結果都是單一行

總之,有一些可能性:

  1. 有別的東西在你的HTML扔它關閉(鏈接到實際的頁面?)
  2. 的縮小文件發生之前,額外的HTML添加(很可能)
  3. 一個實例變量是不正確的(不太可能)
  4. 有東西插入<!--wp-html-compression no compression-->到您的文檔

的一部分,爲什麼在minifyHTML($ HTML)方法的開頭不能插入error_log($html);(或類似),看到原來的HTML是什麼樣子。我的猜測是,結果會告訴你爲什麼它不工作。 (你可能也只是return $html;

編輯--- 這是我的'腳本',請注意,條件註釋是留下來的,並且非條件HTML註釋被剝離。而且我根本不用打擾線路格式,因爲這只是您提供的原始課程中的一項黑客工作。

<?php 
$html = <<<EOF 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]--> 
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]--> 
<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=8"> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Page Title</title> 
<meta name="description" content="desc" /> 
<meta name="keywords" content="c" /> 
<meta name="robots" content="INDEX,FOLLOW" /> 
<link rel="icon" href="http://www.stackoverflow.com/" type="image/x-icon" /> 
<link rel="shortcut icon" href="http://www.stackoverflow.com/" type="image/x-icon" /> 
<!--[if lt IE 7]> 
<script type="text/javascript"> 
//<![CDATA[ 
    var BLANK_URL = ''; 
//]]> 
</script> 
<![endif]--> 
<!--[if lt IE 8]> 
<style type="text/css"> 
    .single-call-to-action .action-text { 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); 
    } 
    #PaypalSideBar a img { 
     left: 0 !important; 
     top: 0 !important; 
     width: 182px !important; 
     height: 96px !important; 
    } 
</style> 
<![endif]--> 
<!--[if lt IE 9]> 
<style type="text/css"> 
    .single-call-to-action .action-text { 
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)"; 
    } 
</style> 
<![endif]--> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">jQuery.noConflict();</script> 

<link href="//fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet" type="text/css"> 

<link rel="stylesheet" type="text/css" href="http://www.stackoverflow.com/test.css" media="all" /> 

<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="http://www.stackoverflow.com/test.css" media="all" /><![endif]--> 
<!--[if lt IE 7]><script type="text/javascript" src="http://www.stackoverflow.com/test.js"></script><script type="text/javascript" src="http://www.stackoverflow.com/test.js"></script><![endif]--> 


<script type="text/javascript"> 
//<![CDATA[ 
Mage.Cookies.path  = '/'; 
//]]> 
</script> 

<script type="text/javascript"> 
//<![CDATA[ 
optionalZipCountries = ["US"]; 
//]]> 
</script> 
<!-- BEGIN GOOGLE ANALYTICS CODEs --> 
<script type="text/javascript"> 
//<![CDATA[ 
    var _gaq = _gaq || []; 

_gaq.push(['_setAccount', 'UA-x']); 
_gaq.push(['_setDomainName', 'http://www.stackoverflow.com/']); 
_gaq.push(['_trackPageview']); 

    (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

//]]> 
</script> 
<!-- END GOOGLE ANALYTICS CODE --> 
<script type="text/javascript"> 
    //<![CDATA[ 
    window.HDUSeed = 'x'; 
    window.HDUSeedIntId = setInterval(function() { 
     if (document.observe) { 
      document.observe('dom:loaded', function() { 
       for (var i = 0; i < document.forms.length; i++) { 
        if (document.forms[i].getAttribute('action') && document.forms[i].getAttribute('action').match('contacts/index/post')) { 
         var el = document.createElement('input'); 
         el.type = ('hidden'); 
         el.name = 'hdu_seed'; 
         el.value = window.HDUSeed; 
         document.forms[i].appendChild(el); 

        } 
       } 
      }); 
      clearInterval(window.HDUSeedIntId) 
     } 
    }, 100) 
    //]]> 
</script> 
<script type="text/javascript">//<![CDATA[ 
     var Translator = new Translate([]); 
     //]]></script><meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 

    <style type="text/css"> 
    /*default iteaser*/ 
    #TT2ILTbox { 
    background-color: #f3f3f3; 
    border: 1px solid #d2d2d2; 
    padding: 10px; 
    text-align: center; 
    width: 280px; 
    margin-bottom: 10px; 
    margin-top: 10px; 
    } 

    #TT2ILTbox h2 { 
    font-size: 12px; 
    font-weight: bold; 
    margin: 5px 0 5px 0; 
    } 

    #TT2ILTcount-line * { 
    font-size: 11px; 
    } 

    #TT2ILTcount-line strong { 
    font: bold 11px Arial; 
    } 

    #TT2ILTcount-line p { 
    margin: 5px 0 5px 0; 
    } 

    #TT2ILTbutton-holder { 
    display: -moz-box !important; 
    display: block; 
    height: 31px; 
    text-align: center; 
    } 

    a.TT2ILTbutton, a.TT2ILTbutton span { 
    background-color: #fa002f; 
    } 

    .TT2ILTbutton * { 
    font: bold 12px Arial; 

    } 

    a.TT2ILTbutton { 
    background-image: url('http://static.www.turnto.com/tra2/images/iteaser/1/button-right.png'); 
    background-repeat: no-repeat; 
    background-position: top right; 
    display: block; 
    height: 31px; 
    margin-right: 6px; 
    padding-right: 16px; 
    text-decoration: none; 
    color: white; 
    } 

    a.TT2ILTbutton span { 
    background-image: url('http://static.www.turnto.com/tra2/images/iteaser/1/button-left.png'); 
    background-repeat: no-repeat; 
    display: block; 
    line-height: 22px; 
    padding: 2px 0 7px 18px; 
    } 

    a.TurnToIteaSee { 
    font-size: 11px; 
    text-decoration: none; 
    color: #000; 
    cursor: pointer; 
    } 
    </style> 


</head> 
<body class=" cms-index-index cms-home"> 
<div class="wrapper"> 
     <noscript> 
     <div class="global-site-notice noscript"> 
      <div class="notice-inner"> 
       <p> 
        <strong>JavaScript seems to be disabled in your browser.</strong><br /> 
        You must have JavaScript enabled in your browser to utilize the functionality of this website.    </p> 
      </div> 
     </div> 
    </noscript> 
    <div class="page"> 
    </div> 
</div> 
</body> 
</html> 


EOF; 

function removeWhiteSpace($str) 
    { 
     $str = str_replace("\t", ' ', $str); 
     $str = str_replace("\n", '', $str); 
     $str = str_replace("\r", '', $str); 

     while (stristr($str, ' ')) 
     { 
      $str = str_replace(' ', ' ', $str); 
     } 

     return $str; 
    } 


$pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si'; 
     preg_match_all($pattern, $html, $matches, PREG_SET_ORDER); 
     $overriding = false; 
     $raw_tag = false; 
     // Variable reused for output 
     $html = ''; 
     foreach ($matches as $token) 
     { 
      $tag = (isset($token['tag'])) ? strtolower($token['tag']) : null; 

      $content = $token[0]; 

      if (is_null($tag)) 
      { 
       if (!empty($token['script'])) 
       { 
        $strip = true; 
       } 
       else if (!empty($token['style'])) 
       { 
        $strip = true; 
       } 
       else if ($content == '<!--wp-html-compression no compression-->') 
       { 
        $overriding = !$overriding; 

        // Don't print the comment 
        continue; 
       } 
       else if (true) 
       { 
        if (!$overriding && $raw_tag != 'textarea') 
        { 
         // Remove any HTML comments, except MSIE conditional comments 
         $content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content); 
        } 
       } 
      } 
      else 
      { 
       if ($tag == 'pre' || $tag == 'textarea') 
       { 
        $raw_tag = $tag; 
       } 
       else if ($tag == '/pre' || $tag == '/textarea') 
       { 
        $raw_tag = false; 
       } 
       else 
       { 
        if ($raw_tag || $overriding) 
        { 
         $strip = false; 
        } 
        else 
        { 
         $strip = true; 

         // Remove any empty attributes, except: 
         // action, alt, content, src 
         $content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content); 

         // Remove any space before the end of self-closing XHTML tags 
         // JavaScript excluded 
         $content = str_replace(' />', '/>', $content); 
        } 
       } 
      } 

      if ($strip) 
      { 
       $content = removeWhiteSpace($content); 
      } 

      $html .= $content; 
     } 

     echo $html; 
+0

#2,#3和#4不是問題。我可以看看你的代碼嗎?謝謝。 – StackOverflowNewbie 2013-03-11 23:12:46

+0

當然,但在測試過程中,我的表現非常出色。 – 2013-03-11 23:32:35

+0

那會很棒。謝謝。 – StackOverflowNewbie 2013-03-12 02:42:34