一、安装FIS3

npm install -g fis3

二、安装fis3的less插件
npm install -g fis-parser-less

三、配置fis-conf.js(以下为我自己的配置，放在要发布的app目录)
这个配置实现了，MD5戳，文件压缩，合并，Less预处理，Sprites雪碧图

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
//=========================================MD5======================================

// 加 md5

fis.match('*.{js,css,png}', {
  useHash: true
});

//时间戳设置

/* fis.set('date', new Date);

 fis.match('*.{js,css,png}', {
   query: '?t=' + (fis.get('date').getYear() + 1900)
          + (fis.get('date').getMonth() + 1)
          + (fis.get('date').getDate())
 });*/

/*     时间戳的另一种写法

 fis.set('new date', Date.now());
 fis.match('*.{js,css,png}', {
   query: '?=t' + fis.get('new date')
 });

*/

//======================================压缩=======================================

//     用了下边的打包合集，所以注释掉了这个

fis.match('*.js', {
  // fis-optimizer-uglify-js 插件进行压缩，已内置
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  // fis-optimizer-clean-css 插件进行压缩，已内置
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  // fis-optimizer-png-compressor 插件进行压缩，已内置
  optimizer: fis.plugin('png-compressor')
});

//====================================合并打包====================================

fis.match('::packager', {
    postpackager: fis.plugin('loader', {
        //不同页面打包到不同的包内，如果去掉的话就是只有一个包，如果想指定打包文件，请看注释
        //allInOne: true
    })
});

//     这个是分别指定打包文件的方法

fis.match('/client/static/js/*.js', {
    packTo: '/client/static/js/aio.js'
});
fis.match('/client/static/lib/*.js', {
    packTo: '/client/static/lib/lib_aio.js'
});
fis.match('/client/static/css/*.{less,css}', {
    packTo: '/client/static/css/aio.css'
});
fis.match('/client/static/lib/*.{less,css}', {
    packTo: '/client/static/lib/lib_aio.css'
});


//====================================less预编译======================================

fis.match('*.less', {
    // fis-parser-less 插件进行解析
    parser: fis.plugin('less'),
    // .less 文件后缀构建后被改成 .css 文件
    rExt: '.css'
})


//==================================Sprites图合并=====================================

// 启用 fis-spriter-csssprites 插件

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

// 对 CSS 进行图片合并
fis.match('*.css', {
    // 给匹配到的文件分配属性 `useSprite`
    useSprite: true
});*/

//==============================禁用Sprites/添加md5/压缩============================

//因为是后边命令覆盖前边命令，所以这个放在最后边

fis.media('debug').match('*.{js,css,png}', {
    useHash: false,
    useSprite: false,
    optimizer: null
})


四、发布(进入要发布的目录)
fis3 release

五、打开发布后的文件夹
fis3 server open

六、运行
fis3 server start

七、调试(在这种情况下就可以修改源码自动发布显示了)
fis3 release -w

三大功能：
1.资源定位：
// 所有的 css—url和发布目录一致
fis.match(‘.css’, {
//发布到/static/css/xxx目录下
release : ‘/static/css$0’
});

// 所有的 css—url和发布目录不一致
fis.match(‘.css’, {
//发布到/static/css/xxx目录下
release : ‘/static/css$0’,
//访问url是/pp/static/css/xxx
url : ‘/pp/static/css$0’
});

2.内容嵌入
给资源加 ?inline 参数来标记资源嵌入需求
源码
 

编译后

3.声明依赖
目的只是产出一张资源依赖的表给后端看，设置按需加载
要在根目录创建一个manifest.json，内容输入RESOURCE_MAP__即可，产出依赖表就在这个文件内
html中注释内容（js，css注释内容也一样）

常用命令

1
node ../../node_modules/fiss/bin/fiss.js release prod -d ./dist
fis3, others
← Prev Next →