PHP动态压缩js,css

正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求、防止轻易查看源代码。

使用

只需要在头部引入一下代码即可:

    <meta charset="utf-8"/>
    <title>demo</title>

    <?php
    //定义需要压缩的文件
    $css = array(
        CSS_PATH . 'base.css',
        CSS_PATH . 'style.css',
        CSS_PATH . 'my.css'
    );

    $js = array(
        PUB_PATH . '/lib/zepto.min.js',
        PUB_PATH . '/js/1.js',
        JS_PATH . '2.js',
    );

    $css_path = base_url(parse_css($css));
    $js_path = base_url(parse_script($js));

    ?>

    <link rel="stylesheet" type="text/css" href="<?php echo $css_path ?>">
    <script src="<?php echo $js_path ?>"></script>

    <!--下面可以继续放不能压缩或者不想压缩的文件-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

这段代码会在指定的目录(例如common/)里生成压缩过后的js和css.每次更新了js,css内容,请先删除生成的压缩文件。

示例:

4e387d5edce14cc2bd6396f6ebb7921b.css
 7c10211f113f3175489196d336d67734.js

注意:
编写的css和js文件一定要符合规范。例如一定要加分号。js的function可以不加分号。

引用的资源

/**
*   合并压缩css
*/
function parse_css($urls)
{
    $url = md5(implode(',', $urls));
    $path = FCPATH. 'static/parse/';
    $css_url = $path . $url . '.css';
    if (!file_exists($css_url)) {
        if (!file_exists($path))
            mkdir($path, 0777);
        $css_content = '';

        foreach ($urls as $url) {
            $css_content .= @file_get_contents($url);
        }

        $css_content = str_replace("\r\n", '', $css_content); //清除换行符
        $css_content = str_replace("\n", '', $css_content); //清除换行符
        $css_content = str_replace("\t", '', $css_content); //清除制表符

        $css_content = str_replace("../images/", "./../common/images/", $css_content);
        @file_put_contents($css_url, $css_content);
    }

    $css_url = str_replace(FCPATH, '', $css_url);
    return $css_url;
}

/**
*   合并压缩js
*/
function parse_script($urls)
{
    $url = md5(implode(',', $urls));
    $path = FCPATH. '/static/parse/';
    $js_url = $path . $url . '.js';
    if (!file_exists($js_url)) {
        if (!file_exists($path))
            mkdir($path, 0777);

        load_qy_lib('JavaScriptPacker');

        $js_content = '';
        foreach ($urls as $url) {
            $append_content = @file_get_contents($url) . "\r\n";
            $packer = new JavaScriptPacker($append_content);
            $append_content = $packer->_basicCompression($append_content);
            $js_content .= $append_content;
        }
        @file_put_contents($js_url, $js_content);
    }

    $js_url = str_replace(FCPATH, '', $js_url);
    return $js_url;
}

项目里引用到第三方类库JavaScriptPacker可以在github下载:

/**
 * 9 April 2008. version 1.1
 *
 * This is the php version of the Dean Edwards JavaScript's Packer,
 * Based on :
 *
 * ParseMaster, version 1.0.2 (2005-08-19) Copyright 2005, Dean Edwards
 * a multi-pattern parser.
 * KNOWN BUG: erroneous behavior when using escapeChar with a replacement
 * value that is a function
 *
 * packer, version 2.0.2 (2005-08-19) Copyright 2004-2005, Dean Edwards
 *
 * License: http://creativecommons.org/licenses/LGPL/2.1/
 *
 * Ported to PHP by Nicolas Martin.
 *
 * ----------------------------------------------------------------------
 * changelog:
 * 1.1 : correct a bug, '\0' packed then unpacked becomes '\'.
 * ----------------------------------------------------------------------
 *
 * Changes:
 * 2014-08-28: grkalik: change class for composer support. no functionality change.
 *
 */
时间: 2024-10-31 14:54:53

PHP动态压缩js,css的相关文章

Yii2中使用asset压缩js,css文件的方法_php实例

官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets.php 生成assets.php,这是一个配置模板,并修改如下 <?php /** * Configuration file for the "yii asset" console command. */ // In the console environment, some pat

Yii2中使用asset压缩js,css文件的方法

官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets.php 生成assets.php,这是一个配置模板,并修改如下 <?php /** * Configuration file for the "yii asset" console command. */ // In the console environment, some pat

nodejs 静态文件: 使用nodejs压缩js,css静态资源

1.[js压缩]uglifyjs source.js -mc -o target.min.js以压缩angular.js为例,可以压缩局部变量名,去掉无用的局部变量,空白符等,压缩比例接近80%,效率不错[user_00@localhost ~]$ uglifyjs angular.js -mc -o angular.min.jsWARN: Dropping unused function isBoolean [angular.js:416,9]WARN: Dropping unused fun

Ant+YUICompressor 合并压缩JS和CSS代码实例

在实际项目中,推荐的是一个html对应一个JS文件和一个CSS文件.这样做可以减少HTTP请求,众所周知,一个HTTP请求的延迟远比下载一个大点的文件大得多. 所以从程序员来看:我要分文件,分模块写.不然代码太混乱了.(多文件) 客户(网站的使用者)来看:我要良好的用户体验,越快越好.(少文件,文件一多HTTP请求会很多) 这就产生了冲突,不过有需求就有市场,我们聪明的前端攻城狮也有自己的方法解决.--链接文件与压缩大法,也就是标题"使用Ant和YUICompressor链接合并压缩你的JS和C

web系统js、css文件终极提速之gzip静态压缩+动态压缩

首先转载一个静态方法 web系统中免不了要使用大量的javascript和css文件,如开源的javascript框架prototype.jquery.extjs-core等等,这些js框架,少都有几百K,我曾经做过不少项目,都用了大量的js.特别是extjs,功能实在是强大,却也是体积最大的一个js框架.使用中稍不留神很容易导致你的系统反映缓慢.为了提高js.css文件的下载速度,从而提高页面的响应速度,减小文件的大小才是终极之道.减少这些文件的大小已经有了不少的js压缩工具可以做到,.在这里

js、css动态压缩页面代码

1.js.css动态压缩页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&quo

php压缩HTML函数轻松实现压缩html/js/Css及注意事项_php技巧

压缩HTML的起因 如何提高网页加载速度 ,需要怎么对html页面优化相信是每个拟提高建站技术站长曾想到的问题,其实网页优化的方法还是很多. 有童鞋询问higrid如何 压缩HTML,也就是说能不能 把所有的html.js.Css在运行前都压缩成一行,清除注释标记.换行符.空格.制表符等.这样一个直接的好处是 减小html页面体积来提高前端加载速度.很多人认为启动gzip,但一般启动gzip都比较少对html启动gzip压缩,因为现在的html都是动态的,不会使用浏览器缓存,而启用gzip的话每

asp.net后台如何动态添加JS文件和css文件的引用?

  首先添加命名空间 using System.Web.UI.HtmlControls; 1.代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGenericControl(); myCss .TagName = "link"; myCss .Attributes.Add("type", "text/css"); myCss .Attributes.Add("rel", &qu

YUICompressor+ANT压缩Java Web工程前端js/css文件

最近team里有个jsp工程想要做一些性能上的优化, 需要对工程里的前端部分(主要是js和css)做一些压缩(这是一个老旧重的工程,重构的成本非常大,也没有人力,只能一步一步去优化).想到与传统ANT工具结合的比较好的yuicompressor. yuicompressor下载 下载地址: http://maven.aliyun.com/nexus/service/local/repositories/central/content/com/yahoo/platform/yui/yuicompr