slime pack生成函数详细说明及使用栗子

SLIME PACK是github上的一个前端编译项目,自己在github上搜下sp-build

通过slime.build生成js、css的生产和开发环境所需的文件,生产环境会自动带压缩及带hash,对于不熟悉gulp的同学,可能是个好的学习资料,可以看看里面的源码及布局,以便于开始自己在公司的项目

下面是slime.build函数的详细说明

默认类型说明
//style: ['css', 'scss', 'sass', 'less', 'stylus', 'styl']  
//templet: ['hbs', 'swig', 'htm', 'html', 'php', 'jsp']  
//script: ['js', 'jsx', 'coffee', 'cjsx']  


/*
* 静态文件生成函数
* {parm1} {string} // 文件名,完整的文件名称,如绝对路径 d:\xxx\yyy.js
*         {string} // 配置名,config中默认的名称,如 config -> pages  
*         {string} // 目录名,如存在的目录 d:\xxx  
*         {array}  // 组合数组,数组元素为string路径 如 ['d:\xxx\yyy.js','d:\xxx\aaa.js']  
*         {json}   // 组合JSON*
* {parm2} {boolean}// 打包/分包,true=打包、false=分包
* {parm3} {json object}
* return stream 不要理会
*/

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


//打包、分包都会产出`{key: value}`对象,vlaue为数组,分包是多元素json
options:
 * [rename] 类型:String --- 分包不支持
   //重命名key值
   0、slime.build('./a', true, {rename: 'xxx',type: 'sass'})    //产出 xxx.css
   1、slime.build(['a.js','b.js'],{rename: 'xxx'})  //产出 xxx.js
   2、slime.build({aaa: ['a.jsx','b.js']},{rename: 'xxx'})  //产出 xxx.js
   3、slime.build('./abc.js',{rename: 'xxx'})  //产出 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 //产出index.css
ary = [                                                      #array  //分别产出文件名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  //产出ggggg.css
testcommon2 =  {ggggg: ary,kkkkk: test}                      #json  //产出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);

你可能感兴趣的:(前端自动化,javascript)