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