Fis3前端工程化之项目实战

Fis3项目

项目目录结构:

E:.

│  .gitignore

│  fis-conf.js

│  index.html

│  package.json

│  README.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-->

添加这个标记即可。

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

启用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的pack

fis.match('::package', {

  postpackager: fis.plugin('loader')

});

//对合并的aio.css进行处理 打包的会自动进行csssprites

fis.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的配置文件中的操作顺序会影响你需要的结果

秒客网