基于FIS的前端工程化实现

---------2015.9.14------------
js、css其他合并方式：

1、nignx可以用combo拼接多个css、js等，结构: <link rel="stylesheet" href="1.css,2.css,3.css">

---------2015.9.10------------
最近尝试了下基于FIS的前端工程化实现。（等下再吐槽FIS3）
先列出要实现的功能：

1、资源定位，自动匹配portal到cdn服务器的路径；
2、资源合并，合并多个CSS、JS文件并压缩;
3、资源加MD5戳或时间戳；
3、png图片压缩；
4、预处理LESS、SASS；
5、模块化
6、ES6转ES5，依赖插件

FIS的配置不复杂，统一格式

fis.match('**.png', {
        release: '$&',
        domain: fis.get('cdn-domain'),
        query: '?=t' + fis.get('new date'),
        // uri: '$&',
        deploy: [
            fis.plugin('replace', {
                from: '$0',
                to: 'pack'
            }),
            fis.plugin('local-deliver') //must add a deliver, such as http-push, local-deliver
        ],
        //压缩png文件
        optimizer: fis.plugin('png-compressor')
    })

全局变量

//CDN域名
fis.set('cdn-domain', 'http://image.baidu.com/01');

//时间戳设置
fis.set('new date', Date.now());

然后就可以fis3 release -d ../output 检查成果了

接下来说一下为什么要吐槽fis3.都是因为文档！文档！文档！
文档相当粗糙，很多功能一笔带过。
比如说你想压缩HTML，在上面是找不到任何参考的，要到npm里面搜

proxy npm search fis-optimizer | grep 'html'
然后出来一些结果，挑一个出来使用就OK了