Fis3前端工程化之项目实战

2017-01-07 19:01:25来源:cnblogs.com作者:leslie·Zhao人点击

Fis3项目


项目目录结构:

E:.│  .gitignorefis-conf.jsindex.htmlpackage.jsonREADME.md│├─material│└─resource    ├─css    ├─images    └─js        ├─lab        │  │        │  └─until        └─ui

项目要求:

1.雪碧图

2.代码模块化

3.预处理

4.md5戳

5.压缩资源

雪碧图


启用雪碧图插件,fis3已内置

fis.match('::package', {  spriter: fis.plugin('csssprites')})

设置雪碧图的合并格式

fis.config.set('settings.spriter.csssprites', {  margin: 10, //图之间的边距  layout: 'matrix' //使用矩阵排列方式,默认为线性`linear`});

预处理


因为使用的是less,所以需要预处理less文件

通过fis-parser-less插件可以处理

安装npm install -g fis-parser-less

fis.match('*.less', {  parser: fis.plugin('less'),  rExt: '.css'})

代码模块化


Mod.js

我这里使用的Mode.js,这个百度开发的一个独立的模块化库。

包裹JS

除了mode.js以外我们还需要npm install -g fis-hook-commonjs来安装一个模块化"包裹"库。

它的作用就是将我们的js代码外面包裹一层,比如我们常用的:jquery.lazyload

通过fis-hook-commonjs包裹后:

define('resource/js/lab/jquery.lazyload', function(require, exports, module) {    //jquery.lazyload代码});

然后通过require('resource/js/lab/jquery.lazyload')这种形式就可以加载我们需要的库了。

设置是否包裹

当然这里我们可以通过fis-conf.js来控制需要包裹的js。

//指定目录文件进行define包裹fis.match('/resource/js/lab/**.js', {  isMod: true})

通过isMode这个属性即可,true意为包裹,false意为不包裹。

添加别名(谨慎使用)

当然常用的jquery的话,我们可以通过下面这种设置来添加别名等。

fis.hook('commonjs')  .match('/resource/js/lab/jquery.js', {    id: 'jquery'  })

调用var $=require('jquery')

控制打包顺序

//设置mod.js的优先级在打包文件的第一位fis.match('/resource/js/lab/mod.js', {  packOrder: -100})

这里是通过packOrder来处理打包的顺序,值越小打包越靠前。-100比-99靠前。

资源合并

资源合并是我们常用的功能,这里我通过安装npm install fis3-postpackager-loader这个库来处理静态文件文件的资源配置。

他会对页面的js,css进行扫描,处理我们需要的文件。

比如我们不想将jquery文件合并,我们可以在html页面中这么处理。

<script type="text/javascript" src="../resource/js/lab/until/interactive.js"></script><!--ignore-->

添加<!--ignore-->这个标记即可。

这样页面的这个文件就不会被处理了。

启用fis3-postpackager-loader

fis.match('::package', {  postpackager: fis.plugin('loader')});

我们的html文件会引入多个js,css。这样的话我们会将他们合并成单个文件,提高性能。

    <script type="text/javascript" src="../resource/js/lab/until/interactive.js"></script>    <script type="text/javascript" src="../resource/js/lab/until/tabchange.js"></script>    <script type="text/javascript" src="../resource/js/ui/swip.js"></script>    <script type="text/javascript" src="../resource/js/ui/tab.js"></script>    <script type="text/javascript" src="../resource/js/ui/main.js"></script>

通过下面配置处理

//静态资源加载器配置 npm install fis3-postpackager-loader//不想加载的引入资源使用<!--ignore-->标记//合并页面js//不进行任何配置 css,js的合并使用fis的packfis.match('::package', {  postpackager: fis.plugin('loader')});//对合并的aio.css进行处理 打包的会自动进行cssspritesfis.config.set('pack', {  '/static/js/index_aio.js': [    '**.js'  ],  '/static/css/index_aio.css': [    '**.css',    '**.less'  ]});

这样处理打包后的static目录下情况:

├─css│      index_aio.css│      index_aio_z.png│└─js        index_aio.js

md5戳


给js,css添加md5戳,使用useHash

fis.media('prod')  .match('/static/**.{css,js}', {    useHash: true  })

压缩资源


fis.media('prod')  .match('/resource/**.js', {    optimizer: fis.plugin('uglify-js')  })  .match('/resource/**.{css,less}', {   optimizer: fis.plugin('clean-css')  })  .match('/static/**.png', {    optimizer: fis.plugin('png-compressor')  })

将js,css,png进行压缩。压缩器fis3已内置,不需要安装库。

最后


注意fis3的配置文件中的操作顺序会影响你需要的结果


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台