slime pack生成函數(shù)詳細(xì)說(shuō)明及使用栗子

0xE7A38A 發(fā)布于2019-08-21 10:32 / 832人閱讀

摘要：是上的一個(gè)前端編譯項(xiàng)目，自己在上搜下通過(guò)生成的生產(chǎn)和開(kāi)發(fā)環(huán)境所需的文件，生產(chǎn)環(huán)境會(huì)自動(dòng)帶壓縮及帶，對(duì)于不熟悉的同學(xué)，可能是個(gè)好的學(xué)習(xí)資料，可以看看里面的源碼及布局，以便于開(kāi)始自己在公司的項(xiàng)目下面是函數(shù)的詳細(xì)說(shuō)明默認(rèn)類型說(shuō)明靜態(tài)文件生成函數(shù)

SLIME PACK是github上的一個(gè)前端編譯項(xiàng)目，自己在github上搜下sp-build

通過(guò)slime.build生成js、css的生產(chǎn)和開(kāi)發(fā)環(huán)境所需的文件，生產(chǎn)環(huán)境會(huì)自動(dòng)帶壓縮及帶hash，對(duì)于不熟悉gulp的同學(xué)，可能是個(gè)好的學(xué)習(xí)資料，可以看看里面的源碼及布局，以便于開(kāi)始自己在公司的項(xiàng)目

下面是slime.build函數(shù)的詳細(xì)說(shuō)明

默認(rèn)類型說(shuō)明
//style: ["css", "scss", "sass", "less", "stylus", "styl"]  
//templet: ["hbs", "swig", "htm", "html", "php", "jsp"]  
//script: ["js", "jsx", "coffee", "cjsx"]  


/*
* 靜態(tài)文件生成函數(shù)
* {parm1} {string} // 文件名，完整的文件名稱，如絕對(duì)路徑 d:xxxyyy.js
*         {string} // 配置名，config中默認(rèn)的名稱，如 config -> pages  
*         {string} // 目錄名，如存在的目錄 d:xxx  
*         {array}  // 組合數(shù)組，數(shù)組元素為string路徑 如 ["d:xxxyyy.js","d:xxxaaa.js"]  
*         {json}   // 組合JSON*
* {parm2} {boolean}// 打包/分包，true=打包、false=分包
* {parm3} {json object}
* return stream 不要理會(huì)
*/

var slime = require("./_builder/configs/slime.config.js");
slime.build(entry, [pack], [options])  


//打包、分包都會(huì)產(chǎn)出`{key: value}`對(duì)象，vlaue為數(shù)組，分包是多元素json
options:
 * [rename] 類型：String --- 分包不支持
   //重命名key值
   0、slime.build（"./a", true, {rename: "xxx",type: "sass"})    //產(chǎn)出 xxx.css
   1、slime.build(["a.js","b.js"],{rename: "xxx"})  //產(chǎn)出 xxx.js
   2、slime.build({aaa: ["a.jsx","b.js"]},{rename: "xxx"})  //產(chǎn)出 xxx.js
   3、slime.build("./abc.js",{rename: "xxx"})  //產(chǎn)出 xxx.js

 * [type] 類型：String --- script不用指定，style/templet，都需要明確指定，如
   //指定文件類型
   1、slime.build("./a",{type: "sass"})
   2、slime.build("./a",{type: "hbs"})

 * [prepend] 類型：Array --- 分包不支持
   //value前插文件
   1、slime.build("./a",{prepend: ["./xxx.js"]})

 * [apend] 類型：Array --- 分包不支持
   //value后插文件
   1、slime.build("./a",{apend: ["./xxx.js"]})

# css 示例(coffee)

config = require "../configs/config.coffee"
test = config.dirs.src + "/css/pages/website/index.scss"     #string //產(chǎn)出index.css
ary = [                                                      #array  //分別產(chǎn)出文件名css
    config.dirs.src + "/css/pages/website/index.scss",
    config.dirs.src + "/css/pages/website/error-404.scss",
    config.dirs.src + "/css/pages/website/error-500.scss"
]
testcommon1 =  {ggggg: ary}                                  #json  //產(chǎn)出ggggg.css
testcommon2 =  {ggggg: ary,kkkkk: test}                      #json  //產(chǎn)出ggggg.css、kkkkk.css

module.exports = (gulp,$,slime)->
    return () ->
        slime.build(test,false,{type: "sass"});
        # slime.build(testcommon1,false,{type: "sass"});
        # slime.build(testcommon2,{type: "sass"});

# js 示例(coffee)

config = require "../configs/config.coffee"
test = config.dirs.src + "/js/pages/h5/lazypage/lazypage.jsx"
ary = [
    config.dirs.src + "/js/pages/h5/loadpage/loadpage.jsx"
]
testcommon1 =  {ggggg: ary}
testcommon2 =  {ggggg: ary,kkkkk: test}
module.exports = (gulp,$,slime)->
    return (cb) ->
        slime.build(testcommon2,cb);