css js merge tool by php and html, from pkrss

 

what:

  i need one tools:

1.it can easy run,forexample can run by web,or in the server

2.it can merge many files to one file,eg:1.js 2.js 3.js => all.js

3.can support by group,and give group name to used in other group.

4.it can write utf8 bom optional.

example prepare:

1.downlad separe files from jquery masonry github.

doc-ready.js EventEmitter.js eventie.js get-size.js get-style-property.js item.js matches-selector.js outlayer.js => jquery.masonry.all.js

how:

1.client

s\tool\combinejs\client\data.js:

var types_data;

(function(){
    var basedir = "../../../../s/ful/";
    var masonryBaseDir = basedir + "js/third/jquery-masonry/";
    var newspaperBaseDir = basedir + "newspaper/";
    types_data = [
        {name:"newspaper.all",text:"combine pkrss runtime to pk.newspaper.all.js",dst:basedir+"../min/js/newspaper/controller/pk.newspaper.all.js", utf8:true,
            src:["pkrss.utils",
            "pkrss.model.rss",
            basedir+"js/newspaper/model/profile.js",
            basedir+"js/newspaper/modelview/newstype.js",
            basedir+"js/newspaper/modelview/newslocale.js",
            basedir+"js/newspaper/modelview/newscatalog.js",
            "jquery.masonry",
            basedir+"js/newspaper/modelview/newstype_newspaper_masonry.js",
            basedir+"js/newspaper/modelview/rightpanel.js",
            basedir+"js/newspaper/modelview/rightpanel_vscroll.js",
            basedir+"js/newspaper/controller/main.js"
            ]},
        {name:"jquery.masonry",text:"combine jquery masonry to jquery.masonry.all.js",dst:masonryBaseDir+"jquery.masonry.all.js", utf8:true,
            src:[masonryBaseDir+"get-style-property.js",
            masonryBaseDir+"get-size.js",
            masonryBaseDir+"matches-selector.js",
            masonryBaseDir+"EventEmitter.js",
            masonryBaseDir+"eventie.js",
            masonryBaseDir+"doc-ready.js",
            masonryBaseDir+"item.js",
            masonryBaseDir+"outlayer.js",
            masonryBaseDir+"jquery.masonry.new.js" 
            ]},
        {name:"pkrss.utils",text:"combine pkrss utils to pk.utils.all.js",dst:basedir+"js/utils/pk.utils.all.js", utf8:true,
            src:[basedir+"js/patch/timer.js",
            basedir+"js/native/core.js",
            basedir+"js/native/plateform.js",
            basedir+"js/native/timer.js",
            basedir+"js/native/event.js",
            basedir+"js/native/net.js",
            basedir+"js/utils/language.js",
            basedir+"js/utils/html.js",
            basedir+"js/utils/ui.js",
            basedir+"js/utils/ajax.js"
            ]},
        {name:"pkrss.model.rss",text:"combine pkrss model rss to pk.model.rss.all.js",dst:basedir+"js/model/pk.model.rss.all.js", utf8:true,
            src:[basedir+"js/model/rssclient.js",
            basedir+"js/model/rssresponse.js",
            basedir+"js/model/rssevent.js",
            basedir+"js/model/rsslocale.js",
            basedir+"js/model/rsscatalog.js",
            basedir+"js/model/rsstable.js",
            basedir+"js/model/rssitem.js"
            ]}
    ];
})();

 

s\tool\combinejs\client\client.js:

 

function client(data){
    if(!data || !data.length)
        return;
    this.types = data;
    this.split = ",";
    this.inittype();
    var self = this;
    $("#content_do").on("click",function(){
        self.ondo();
    });
}

client.prototype.inittype = function(){
    var obj = $("#content_type");
    var s = '',item;
    for(var i in this.types){
        item = this.types[i];
        s += '<option value="'+item.name+'">'+item.text+'</option>';
    }
    obj.html(s);
};

client.prototype.getItem = function(name){
    for(var i in this.types){
        if(this.types[i].name == name){
            return this.types[i];
        }
    }
    return null;
};

client.prototype.getItemJsString = function(item){
    var jspath="";
    for(var i in item.src){
        src = item.src[i];
        
        item2 = this.getItem(src);
        if(item2)
            jspath += this.getItemJsString(item2);
        else{            
            jspath += this.split + src;
        }
    }
    return jspath;
};

client.prototype.ondo = function(){
    $("#content_result").text("");
    
    var name = $("#content_type").val();
    var item = this.getItem(name);
    if(!item)
        return;
    var jspath = this.getItemJsString(item);
    if(jspath.substring(0,1)==this.split)
        jspath = jspath.substring(1);
    $.post("../server/do.php",{jspath:jspath,split:this.split,dst:item.dst,utf8:item.utf8},function(response){
        $("#content_result").text(response);
    });
};

(function(){
new client(types_data);
})();

s\tool\combinejs\client\index.htm

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta http-equiv="content-language" content="en" />
        <meta http-equiv="Author" content="admin@pk17s.cn" />
        <meta http-equiv="Copyright" content="pkrss.com" />
        <title>pkrss - combine js tools</title>
        <meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" /> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
        
        <meta name="robots" content="all" />
        <meta name="Distribution" content="global" />
        <meta name="keywords" content="pkrss,combine js online tools" />
        <meta name="description" content="pkrss,combine js tools.">
        
        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    </head>
    <body>

    <div id="content">
        
        <select id="content_type">
        </select>
        <input id="content_do" type="button" value="do">
        <br />
        <p id="content_result" style="width:100%;height:400px;text-overflow:clip;">Result:</p>
</div> 



<script type="text/javascript" src="../../../ful/js/third/jquery/jquery.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="client.js"></script>

</body>
</html>

2.server:

s\tool\combinejs\server\do.php

<?php

    $path=isset($_POST["jspath"]) ? $_POST["jspath"] : null;
    if(empty($path))
        exit();
    //split param
    $split=isset($_POST["split"]) ? $_POST["split"] : null;
    if(empty($split))
        $split = ",";
    //file path array
    $path_arr = explode($split,$path);
    //the count of file path array
    $count=count($path_arr);
    
    $bom = chr(0xEF) . chr(0xBB) . chr(0xBF);
    
    
    //store all files text
    $js_str='';
    
    if(isset($_POST["utf8"]) && $_POST["utf8"])
        $js_str=$bom;
    
    //read each file
    for($i=0;$i<$count;++$i){
        $dst = $path_arr[$i];
        
    // allow postfix array
        if(preg_match_all('/^[^:]*\.(js|css)$/', $dst, $matches) !== 1){
            exit("not allow:" . $dst);
        }
        
        $file_read=fopen($dst,"r+b");
        if(!$file_read){
            exit("read error:" . $dst);
            continue;
        }
        while(!feof($file_read)){
            $line=fgets($file_read);
            // remove utf8 bom.
            //...
            if(substr($line, 0, 3)==$bom){
                $line = substr($line, 3);
            }
    
            $js_str.=$line;
        }
        $js_str .= "\n";
        fclose($file_read);
    }
    
    // add utf8 bom
    
    // write to $dst file.
    $dst = isset($_POST["dst"]) ? $_POST["dst"] : null;
    if(!empty($dst)){
        $file_write=fopen($dst,"w+");
        if($file_write){
            fwrite($file_write,$js_str);
            fclose($file_write);
        }else{
            exit("write error:" . $dst);
        }
    }
    //echo $js_str;return;
    // flush all content to client.
    if(!empty($_SERVER['HTTP_ACCEPT_ENCODING']) && substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
        ob_start("ob_gzhandler"); 
    else 
        ob_start();
    echo $js_str;
    ob_end_flush();
?>

screen shot: