By 朱阳星

文章目录

fis很强大对我来说有一下几个方面可供利用，这几点足以让我学习并利用它了
1.对文件增加MD5戳（便于增量发布，缓存）
2.对某些图片进行合并（把小图标们进行合并很有必要）
3.文件压缩（css,js以及图片文件的压缩）
4.多个js,css合并为一个

使用npm install -g fis3命令安装fis3
安装完成后执行fis3 -v 判断是否安装成功
升级fis使用 npm update -g fis3命令
发布fis3 release -d <path>

配置文件fis-conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
fis.match('::packager', {
//打包的时候启用csssprites插件
  spriter: fis.plugin('csssprites'),
//一个页面只包含这个页面用过的资源
  postpackager: fis.plugin('loader', {
    //allInOne: true
  })
});
//js,css,png文件添加MD5戳
fis.match('*.{js,css,png}', {
  useHash: true
});
//less文件解析
fis.match('*.less', {
  // fis-parser-less 插件进行解析 
  //需要提前安装该插件
  parser: fis.plugin('less'),
  // .less 文件后缀构建后被改成 .css 文件
  rExt: '.css'
})
fis.match('*.{less,css}', {
//需要fis3-postpackager-loader插件
  packTo: '/static/aio.css'
});
//生产环境压缩js文件
fis.media('prod').match('*.js', {
// fis-optimizer-uglify-js 插件进行压缩，已内置
  optimizer: fis.plugin('uglify-js')
});
//生产环境压缩css文件,FIS3 构建会对 CSS 中，路径带 ?__sprite的图片进行合并。
//为了节省编译的时间，分配到 useSprite: true 的 CSS 文件才会被处理。
fis.media('prod').match('*.css', {
  useSprite: true,
  //fis-optimizer-clean-css 插件进行压缩，已内置
  optimizer: fis.plugin('clean-css')
});
//生产环境压缩png文件
fis.media('prod').match('*.png', {
  // fis-optimizer-png-compressor 插件进行压缩，已内置
  optimizer: fis.plugin('png-compressor')
});
//debug环境下不使用MD5,
//fis3 release debug 启用 media debug 的配置
fis.media('debug').match('*.{js,css,png}', {
  useHash: false,
  useSprite: false,
  optimizer: null
})
//执行 fis3 release 直接发布到某个目录
// fis.match('*', {
//   deploy: fis.plugin('local-deliver', {
//     to: '/Users/my-name/work/htdocs'
//   })
// })

使用 fis3 server open命令开启内部自带的server所在文件夹 默认8080
发布到fis自带的server上 fis3 release
启动文件监听 fis3 release -w
启动fis3的server fis3 server start
修改端口并启动fis3 server start -p 10203

文章目录