使用fis对资源进行打包、压缩、合并、加MD5发布

正文开始

<p>http://blog.csdn.net/aer_code/article/details/47666023</p><p></p><p>前端资源的构建是非常重要的:资源在被压缩整合之后,更加易于维护;当发布到线上之后,整合好的资源可以极大的提高网站的性能:减少请求次数以加快响应和渲染速度,加上MD5让资源定位更加方便。</p><p>废话不多说:我们看看到底怎么做</p><p>   假设我们拿到的是一个混乱的,基本没有结构的文件,里面包含了各种html、css、假设、还有可能有less、font等。这种结构让人看起来十分的头晕,必须有一个规范化的文件结构来约束,从而让别人看起来更加清晰,主要是也让维护变得更加的方便。</p><p><br /></p><p>这是主要的fis-conf.js源码:</p><p>/**<br /> * Created by huguantao on 15/8/11.<br /> */<br />fis.config.merge({<br />    init: {<br />        charset: 'utf8'<br />    },<br />    modules: {<br />        parser: {<br />            // styl后缀的文件使用fis-parser-stylus插件编译<br />            styl: 'stylus',<br />            // jade后缀的文件使用fis-parser-jade插件编译<br />            jade: 'jade'<br />        }<br />    },<br />    roadmap: {<br />        ext: {<br />            // styl编译以后后缀名改成css<br />            styl: 'css',<br />            // jade编译以后后缀名改成html<br />            jade: 'html'<br />        },<br />        path: [ {<br />            reg: '**.styl',<br />            url: '$&'<br />        }, {<br />            reg: '**.png',<br />            url: '$&'<br />        }, {<br />            reg: '**.jpg',<br />            url: '$&'<br />        }, {<br />            reg: '**.js',<br />            url: '$&'<br />        }]<br />    },<br />    deploy: {<br />        // 发布到当前项目的上一级的目录<br />        local: {<br />            // 发布到上一级的local目录<br />            to: '../local'<br />            //replace : {<br />            //    from : '/jimutimes',<br />            //    to : '',<br />            //}<br />        },<br />        online: {<br />            //发布到上一级的dist目录下<br />            to: '../dist'<br />        }<br />    }<br />});<br />//fis.config.set('settings.spriter.csssprites.margin',20);<br />fis.config.set('modules.postpackager', 'simple');<br />fis.config.set('settings.postpackager.simple.autoCombine', true);<br />fis.config.set('settings.postpackager.simple.autoReflow', true);<br />fis.config.set('pack', {<br />    '/pkg/lib.js': [<br />        '/scripts/lib/html5shiv/**.js',<br />        'scripts/lib/respond/**.js',<br />        '/scripts/lib/wowjs/**.js',<br />        '/scripts/lib/jquery/**.js',<br />        '/scripts/lib/pacejs/**.js',<br />        '/scripts/lib/bootstrap/**.js',<br />        '/scripts/module/**.js',<br />    ],<br />    '/pkg/lib.css': [<br />        //'/css/lib/bootstrap/**.css',<br />        '/css/lib/animate/**.css',<br />        '/font-awesome/**.css',<br />        '/css/module/**.styl',<br />    ]<br />});</p><p>之后使用fis release  -omp  -d loal/online即可发布带有MD5压缩并合并的资源。</p><br />

正文结束

阿里云、腾讯云 apache的vhost配置https bower简明入门教程 (fis3用到)