基于FIS的前端工程化实现

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

1、nignx可以用combo拼接多个css、js等,结构: 

---------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了

你可能感兴趣的:(前端工程化,前端)