程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> smartcomb:用php實現的web模塊拼合器,smartcombweb

smartcomb:用php實現的web模塊拼合器,smartcombweb

編輯:關於PHP編程

smartcomb:用php實現的web模塊拼合器,smartcombweb


smartcomb是一個用php實現的web模塊拼合器,相對於其他的代碼拼合工具,如下特性:

  • 可以拼合任意類型的文件,不限於js文件。
  • 集中並聲明依賴,自動分析依賴拼合,按需加載。
  • 支持多種配置切換
  • 自動修改css,less中的圖片路徑,無需擔心拼合後css圖片路徑出錯
  • 支持php命令行調用,支持命令直接生成拼合靜態文件

github地址:https://github.com/hafeyang/smartcomb

模塊聲明配置

smartcomb是由smartcomb.php 和modules.js構成,modules.js是一個json文件,必須是嚴格的json格式,key需要加上雙引號,用於模塊聲明。格式為:

{
    [profile]:{
        "basePath": "所有文件共有的基礎路徑",
        "modules":{
            "[modulename]":{
                [type1]:["file1","file2"],
                "dependencies":["depend module name","",""]
            }
        }
    }
 }

下面是一個demo:

{
    "default":{
        "basePath":"modules/",
        "modules":{
            "base":{
                "js":["base/base.js","base/common.js"],
                "css":["base/reset.css"],
                "less":["base/reset.less"]
             },
             "pageA":{
                 "js":["pageA/pageA-util.js","pageA/pageA.js"],
                 "css":["pageA/pageA.css"],
                 "dependencies":["base"]
             }
        }
    }
}

web中使用

上面的demo聲明了profile 為default的模塊配置。聲明兩個模塊base和pageA,pageA依賴於base模塊。其中base模塊包括兩個js文件: modules/base/base.js,該路徑是相對於smartcomb.php的路徑,文件類型可以任意定義,使用時指定類型即可。

如上配置文件,我們可以在頁面中如下引用:

<script type="text/javascript" src="path/to/smartcomb.php?type=js&modules=pageA"></script>
<link href="path/to/smartcomb.php?type=css&modules=pageA" type="text/css" charset="utf-8"/>

pageA依賴於base模塊。smartcomb自動拼合依賴的的文件。

smartcomb.php調用參數:

  • profile:配置類型,默認為default。用該參數可以切換profile
  • type:文件類型,模塊聲明中的類型,可以是自定義的任何文件類型,默認是js
  • modules:需要拼合的模塊,多個模塊可以用,分割

命令行中使用

可以直接使用 php命令,如:

php smartcomb.php -profile default -type js -modules pageA

命令直接在標准輸出中輸出拼合結果,可以直接生成文件。

php smartcomb.php -profile default -type js -modules pageA > pageA-dep.js

參數與web調用方式一致

 

Thanks,任何問題,請與我聯系:)

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved