FIS3 内置插件及配置

fis3 中内嵌了很多常用的插件。

可以连接到仓库介绍页面查看详情，这里将概要描述这些插件的作用及基本配置。

fis-optimizer-clean-css

用于压缩 css，一般用于发布产品库代码。

  1. fis
  2.   .media('prod')
  3.   .match('*.css', {
  4.     optimizer: fis.plugin('clean-css')
  5.   });

配置项说明，请参考 how-to-use-clean-css-programmatically。

  1. fis
  2.   .media('prod')
  3.   .match('*.css', {
  4.     optimizer: fis.plugin('clean-css', {
  5.       keepBreaks: true,
  7.       // 更多其他配置
  8.     })
  9.   });

fis-optimizer-png-compressor

用来压缩 png 文件，减少文件体积，详情请见 pngcrush 和 pngquant 说明。

  1. fis
  2.   .media('prod')
  3.   .match('*.png', {
  4.     optimizer: fis.plugin('png-compressor', {
  6.       // pngcrush or pngquant
  7.       // default is pngcrush
  8.       type : 'pngquant'
  9.     })
  10.   });

fis-optimizer-uglify-js

用来压缩 js 文件，混淆代码，减少文件体积。

  1. fis
  2.   .media('prod')
  3.   .match('*.js', {
  4.     optimizer: fis.plugin('uglify-js', {
  6.       // https://github.com/mishoo/UglifyJS2#compressor-options
  7.     })
  8.   });

配置说明

fis-spriter-csssprites

针对 css 规则中的 background-image 做图片优化，将多张零碎小图片合并，并自动修改 css 背景图片位置。

此插件并不会处理所有的 background-image 规则，而只会处理 url 中带 ?__sprite 图片的规则。

  1. li.list-1::before {
  2.   background-image: url('./img/list-1.png?__sprite');
  3. }
  5. li.list-2::before {
  6.   background-image: url('./img/list-2.png?__sprite');
  7. }
  1. // 启用 fis-spriter-csssprites 插件
  2. fis.match('::package', {
  3.   spriter: fis.plugin('csssprites')
  4. })
  6. // 对 CSS 进行图片合并
  7. fis.match('*.css', {
  8.   // 给匹配到的文件分配属性 `useSprite`
  9.   useSprite: true
  10. });

详情请查看 fis-spriter-csssprites

fis3-deploy-local-deliver

用来支持 fis3 本地部署能力，将 fis3 编译产出到指定目录。

  1. fis.match('*.js', {
  2.   deploy: fis.plugin('local-deliver', {
  3.       to: '/var/www/myApp'
  4.   })
  5. })

fis3-deploy-http-push

用来支持 fis3 远程部署能力，将 fis3 编译通过 http post 方式发送到远程服务端。

  1. fis.match('*.js', {
  2.     deploy: fis.plugin('http-push', {
  4.         // 如果配置了receiver，fis会把文件逐个post到接收端上
  5.         receiver: 'http://www.example.com:8080/receiver.php',
  7.         // 这个参数会作为文件路径前缀附加在 $_POST['to'] 里面。
  8.         to: '/home/fis/www'
  9.     })
  10. })

fis3-hook-components

用来支持 短路径 引用安装到本地的 component。

如： fis3 install bootstrap 后，在页面中可以这么写。

  1. <link xxx href="bootstrap/css/bootstrap-theme.css" />
  2. <script src="boostrap/button.js"></script>
  4. <!--或者直接用模块化的方式引用 js-->
  5. <script type="text/javascript">
  6.   require(['bootstrap', 'bootstrap/button']);
  7. </script>

此功能已自动开启。

fis3-packager-map

用来支持 fis 简单的打包，无需额外设置，已自动开启。

  1. fis.match('*.css', {
  2.   packTo: '/pkg/all.css'
  3. });
  5. fis.match('*.js', {
  6.   packTo: '/pkg/all.js'
  7. });