fangfis-cli: fangfis-cli 是一个基于 Node 的前端构建工具，根据房天下前端开发需求 ...

OStack程序员社区-中国程序员成长平台 › 门户 › 开源› 开发工具›编译/构建/部署

原作者: [db:作者] 来自: 网络收藏邀请

fangfis-cli 是一套与 fang.js 完善结合的自动化代码构建工具。

fangfis-cli 是一个基于 Node 的前端构建工具，根据房天下前端开发需求进行了相应的定制，支持 CSS 的压缩、JS 的 ES6 转 ES5、合并、压缩、混淆等功能，通过 FangFIS 结合 fang.js，我们可以方便快速地处理前端静态资源文件，减少了多余的工作，提高开发效率和代码性能。

详细教程

教程地址

** fang.js是基于cmd上的封装,原则上该框架可以和基于cmd的所有框架配合使用(例如:seajs)相关seajs的用法可以参考下面文档,这里提供一个seajs的cdn资源

https://www.zhangxinxu.com/sp/seajs/

<script src="https://cdn.bootcss.com/seajs/2.3.0/sea.js"></script>

** 开发代码库,有问题欢迎提issue https://gitee.com/tankunpeng/fangfis-cli/issues

需要注意，本地开发的代码，必须先通过 fangfis-cli 进行构建才能发布到正式环境。

安装

fangfis-cli 基于 Node.js，因此在开始安装之前，确保你的系统安装了 Node.js 环境。(Nodejs >= 4.x, npm > 3.x)

$ npm install -g fangfis-cli

使用

输入项目名称，默认为空即在当前文件夹下初始化。

$ fangfis init

该文件夹下不为空提示，可以选择继续，不会删除已有文件。

构建完成后默认自动安装所需要的依赖模块，如果自动安装失败，请进入该目录，手动安装，推荐使用cnpm安装参考地址: cnpm

$ npm installor$ cnpm install

初始化完成后的结构

.├── dev│   ├── css│   ├── images│   └── js├── fangfis.config.json├── package-lock.json├── package.json└── static5 directories, 3 files

注:

dev文件夹目前版本为构建工具预留目录，所有开发项目必须在该目录下开发，下面的css、js和images文件夹的名字不能更改。

构建配置

init自动生成默认配置文件fangfis.config.json,用户可以自定义配置选项以控制构建,配置结构如下:

{    // 构建配置项    "build": {        // 自定义输入目录,相对路径,默认为dev 注: 自定义路径下需要有js,images,css文件夹        "input": "./dev",        // 自定义输出目录,默认为static        "output": "./static",        // 模块基本路径,构建工具会自动根据该基本路径进行寻找模块        "base": "./dev/js",        // 入口文件支持多种格式        /* *main            main,main2            main,main2,ery*            module/js/main            module/js/main,module/js/main2            module/js/main,module/js/main2,module/js/ery*            main*            *main            main_*tool        */        "main": "main",        // 模块合并配置项        "combo": {            // 忽略模块,默认jquery            "ignore": [                "jquery"            ],            // 需要额外处理的模块,格式同main            "addMod": ["main2"],            // fangjs配置            "config": {                "alias": {                    "jquery": "jquery",                    "util": "plugins/util"                },                "paths": {                    "webim": "//js.soufunimg.com/upload/webim"                }            }        }    },    // 上传ftp配置    "upload": {        // 默认配置        "default": {            // host            "host": "localhost",            // 用户名            "user": "anonymous",            // 密码            "pass": "anonymous@",            // 本地待上传目录            "input": "./static",            // ftp路径 相对于ftp根路径            "output": "./static",            // 端口            "port": 21,            // 连接超时时间 单位:分钟            "idleTimeout": 100,            // 最大连接数            "maxConnections": 5        },        // 同default        "online": {            "host": "localhost",            "user": "anonymous",            "pass": "anonymous@",            "input": "./static",            "output": "./static",            "port": 21,            "idleTimeout": 100,            "maxConnections": 5        }    }}

fangfis build

使用fangfis进行构建。

构建选项如下：

    -w, --watch           监听文件变化并自动构建    -j, --js              压缩js文件到目标文件夹,入口文件`自动合并`所有依赖到目标文件夹,默认: static/js    -c, --css             压缩所有css文件到目标目录,输入目录为`dev/css`,不可自定义,输出目录可自定义,默认: static/css    -i, --img             拷贝所有img文件到目标目录,输入目录为`dev/images`,不可自定义,输出目录可自定义,默认: static/imgages    -o, --output [value]  自定义输入目录,可自定义到一级,默认: ./static    -m, --main [value]    自定义入口文件,只能传入正则表达式,默认: /^entry_.*\.js$/i    -s, --sourcemap       是否生成sourcemap文件,默认不生成    -u, --upload          构建完成后是否自动上传ftp    -h, --help            帮助信息

例子：

$ fangfis b -o ./test1 -cjiwor$ fangfis build -o ./test1 -c -j -i -w

建议使用默认输出目录

fangfis upload

使用fangfis 上传ftp

    -H, --host [value] FTP host, 默认为localhost    -u, --user [value] FTP user, 默认为anonymous    -p, --pass [value] FTP password, 默认为anonymous@    -o, --output [value] FTP 上传目标路径,相对FTP根路径, 默认为./static    -i, --input [value] FTP 上传源路径路径,相对本地路径, 默认为./static    -t, --type [value] FTP连接类型,一般分为测试和正式. 默认为default    -P, --port [value] FTP 端口, 默认为21    -T, --idleTimeout [value] FTP连接超时时间, 默认100    -m, --maxConnections [value] FTP最大连接数. 默认为5