Skip to content

Commit

Permalink
文档补充
Browse files Browse the repository at this point in the history
  • Loading branch information
2betop committed Jun 6, 2016
1 parent a18228d commit 8043f67
Show file tree
Hide file tree
Showing 3 changed files with 337 additions and 2 deletions.
1 change: 1 addition & 0 deletions doc/docs/INDEX.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,4 @@
- [自定义插件](./api/dev-plugin.md)
- [mock 假数据模拟](./node-mock.md)
- [FIS2 到 FIS3](./fis2-to-fis3.md)
- [常见的插件列表](./common-plugin.md)
4 changes: 2 additions & 2 deletions doc/docs/beginning/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

详细过程参考官网 https://nodejs.org

> Node **版本要求** 0.8.x,0.10.x, 0.12.x,4.x,不在此列表中的版本不予支持。最新版本 node 支持会第一时间跟进,支持后更新支持列表。
> Node **版本要求** 0.8.x,0.10.x, 0.12.x,4.x,6.x,不在此列表中的版本不予支持。最新版本 node 支持会第一时间跟进,支持后更新支持列表。
- Ubuntu 用户使用 `apt-get` 安装 node 后,安装的程序名叫 `nodejs`,需要软链成 `node`
- Windows 用户安装完成后需要在 CMD 下确认是否能执行 node 和 npm
Expand All @@ -22,7 +22,7 @@ npm install -g fis3
- 如果已经安装了 [FIS](https://github.com/fex-team/fis),也执行上面的命令进行安装,FIS3 和 FIS 是不同的构建工具,向下无法完全兼容。如果要从 FIS 迁移到 FIS3,请参考文档 [FIS 升级 FIS3](../fis2-to-fis3.md)
- 如果 npm 长时间运行无响应,推荐使用 [cnpm](http://npm.taobao.org/) 来安装

安装完成后执行 `fis3 -v` 判断是否安装成功,如果安装成功,则显示如下信息
安装完成后执行 `fis3 -v` 判断是否安装成功,如果安装成功,则显示类似如下信息

```
$ fis3 -v
Expand Down
334 changes: 334 additions & 0 deletions doc/docs/common-plugin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,334 @@
## 常见插件列表


### parser 插件

#### [fis-parser-babel-5.x](https://github.com/fex-team/fis-parser-babel-5.x)

支持 es6、es7 或者 jsx 编译成 es5

```js
fis.match('*.jsx', {
parser: fis.plugin('babel-5.x')
})
```

#### [fis3-parser-typescript](https://github.com/fex-team/fis3-parser-typescript)

支持 typescript、es6 或者 jsx 编译成 js。速度相比 babel 略快,但是 es7 跟进较慢。

```js
fis.match('*.jsx', {
parser: fis.plugin('typescript')
})
```

#### [fis-parser-less-2.x](https://github.com/fouber/fis-parser-less-2.x)

支持 less 编译成 css

```js
fis.match('*.less', {
parser: fis.plugin('less-2.x'),
rExt: '.css'
})
```

#### [fis-parser-node-sass](https://github.com/fex-team/fis-parser-node-sass)

支持 sass/scss 编译成 css。

```js
fis.match('*.scss', {
rExt: '.css',
parser: fis.plugin('node-sass', {
// options...
})
})
```

#### [fis-parser-jdists](https://github.com/fex-team/fis-parser-jdists)

一款强大的代码块预处理工具。比如加上如下配置,在 `debug` 注释中的代码,在正式环境下自动移除。

```js
fis.media('production').match('*.js', {
parser: fis.plugin('jdists', {
remove: "debug"
})
})
```

```js
/*<debug>*/
// 这段代码在 fis3 release production 的时候会被移除。
console.log(debug);
/*</debug>*/
```

### preprocessor 插件


#### [fis3-preprocessor-js-require-css](https://github.com/fex-team/fis3-preprocessor-js-require-css)

允许你在 js 中直接 `require` css 文件。

```js
fis.match('*.{js,es,es6,jsx,ts,tsx}', {
preprocessor: fis.plugin('js-require-css')
})
```

#### [fis3-preprocessor-js-require-file](https://github.com/fex-team/fis3-preprocessor-js-require-file)

允许你在 js 中直接 `require` 文件。比如图片,json, 其他静态文件。

require 部分将会替换成部署后的 url。 同时还支持,如果文件小于 20K 直接替换成 base64 字符串。

```js
fis.match('*.{js,es,es6,jsx,ts,tsx}', {
preprocessor: fis.plugin('js-require-file')
})
```

### postprocessor 插件

待补充

### optimizer 插件

#### [fis-optimizer-uglify-js](https://github.com/fex-team/fis-optimizer-uglify-js)

压缩 js 代码。

```
fis.match('*.{js,jsx,ts,tsx,es6,es}', {
optimizer: fis.plugin('uglify-js')
});
```

#### [fis-optimizer-clean-css](https://github.com/fex-team/fis-optimizer-clean-css)

压缩 css 代码。

```
fis.match('*.{scss,sass,less,css}', {
optimizer: fis.plugin('clean-css',{
//option
})
})
```

#### [fis-optimizer-png-compressor](https://github.com/fex-team/fis-optimizer-png-compressor)

压缩 png 图片。

```js
fis.match('*.png', {
optimizer: fis.plugin('png-compressor',{
//option
})
})
```

#### [fis-optimizer-smarty-xss](https://github.com/fex-team/fis-optimizer-smarty-xss)

smarty xss 修复插件。 [fis3-smarty](https://github.com/fex-team/fis3-smarty) 中已默认配置好。

```
fis.match('*.tpl', {
optimizer: fis.plugin('smarty-xss')
})
```


#### [fis-optimizer-html-compress](https://github.com/pianist829/fis-optimizer-html-compress)

smarty html 代码压缩插件。 [fis3-smarty](https://github.com/fex-team/fis3-smarty) 中已默认配置好。

```
fis.match('*.tpl', {
optimizer: fis.plugin('html-compress')
})
```

#### [jello-optimizer-velocity-xss](https://github.com/fex-team/jello-optimizer-velocity-xss)

velocity 模板 xss 修复插件。

```
fis.match('*.vm', {
optimizer: fis.plugin('velocity-xss')
})
```


### package 插件

#### [fis3-packager-map](https://github.com/fex-team/fis3-packager-map)

在 fis3 中自带了, 默认的打包插件。详情见插件 [Readme](https://github.com/fex-team/fis3-packager-map)

#### [fis3-packager-deps-pack](https://github.com/fex-team/fis3-packager-deps-pack)

支持包含依赖的打包插件

```js
fis.match('::packager', {
packager: fis.plugin('deps-pack', {

'pkg/hello.js': [

// 将 main.js 加入队列
'/static/hello/src/main.js',

// main.js 的所有同步依赖加入队列
'/static/hello/src/main.js:deps',

// 将 main.js 所以异步依赖加入队列
'/static/hello/src/main.js:asyncs',

// 移除 comp.js 所有同步依赖
'!/static/hello/src/comp.js:deps'
],

// 也可以从将 js 依赖中 css 命中。
'pkg/hello.css': [
// main.js 的所有同步依赖加入队列
'/static/hello/src/main.js:deps',
]
})
});
```

#### [fis3-postpackager-loader](https://github.com/fex-team/fis3-postpackager-loader)

静态资源前端加载器,纯前端项目必备插件。自动加载页面中用到的资源,同时还能按页面级别的All In One 打包。

```
fis.match('::packager', {
postpackager: fis.plugin('loader')
});
```


### deploy 插件

#### [fis3-deploy-local-deliver](https://github.com/fex-team/fis3-deploy-local-deliver)

已自带 fis3 中。用来将文件产出到本地。

```js
fis.match('*.js', {
deploy: fis.plugin('local-deliver', {
to: './output'
})
})
```

#### [fis3-deploy-http-push](https://github.com/fex-team/fis3-deploy-http-push)

将产出文件通过 http post 到目标机器。

```js
fis.match('*.js', {
deploy: fis.plugin('http-push', {
//如果配置了receiver,fis会把文件逐个post到接收端上
receiver: 'http://www.example.com:8080/receiver.php',
//这个参数会跟随post请求一起发送
to: '/home/fis/www'
})
})
```

#### [fis3-deploy-tar](https://github.com/fex-team/fis3-deploy-tar)

将产出文件,打包成 tar 文件。

```
fis.match('**', {
deploy: [
fis.plugin('tar'),
fis.plugin('local-deliver', {
to: './output'
})
]
})
```

#### [fis3-deploy-zip](https://github.com/fex-team/fis3-deploy-zip)

将产出文件,打包成 zip 文件。

```
fis.match('**', {
deploy: [
fis.plugin('zip'),
fis.plugin('local-deliver', {
to: './output'
})
]
})
```

#### [fis3-deploy-encoding](https://github.com/fex-team/fis3-deploy-encoding)

将产出的文件做编码处理。

```
fis.match('**', {
charset: 'gbk',
deploy: [
fis.plugin('encoding'),
fis.plugin('local-deliver')
]
});
```

#### [fis3-deploy-replace](https://github.com/fex-team/fis3-deploy-replace)

将产出的文件,做文本替换。

```
fis.match('**', {
deploy: [
fis.plugin('replace', {
from: /(img|cdn)\.baidu\.com/,
to: function ($0, $1) {
switch ($1) {
case 'img':
return '127.0.0.1:8080';
case 'cdn':
return '127.0.0.1:8081';
}
return $0;
}
}),
fis.plugin('local-deliver')
]
});
```

#### [fis3-deploy-skip-packed](https://github.com/fex-team/fis3-deploy-skip-packed)

将产出的文件过滤掉已被打包的。

```
fis.match('**', {
deploy: [
fis.plugin('skip-packed', {
// 配置项
}),
fis.plugin('local-deliver', {
to: 'output'
})
]
})
```

### hook 插件

待补充

0 comments on commit 8043f67

Please sign in to comment.