node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

kn-fis

构建工具,基于gulp和webpack

安装

npm --registry -g install kn-fis

命令

在cmd中运行 kn -h 来获取命令帮助(我就是懒得写)

功能一览

创建项目

  • 生成项目结构

编译预览

  • npm组件化管理功能
  • 页面、组件html编译
  • mock数据注入
  • less 编译
  • CSS合并压缩
  • CSS autoprefix,px转rem
  • JS合并压缩
  • 自动生成雪碧图,自动多倍图
  • 文件内联,自定义图片转base64
  • 图片压缩
  • 字体压缩
  • 文件MD5戳
  • 本地预览
  • 自动刷新
  • 资源定位(图片等资源路径替换)
  • 生成项目压缩包

生成项目结构说明

├── mock                    - mock数据目录
│   ├── ajax                - 通过ajax的mock数据目录
|       ├── index.json      - ajax的mock文件
│   ├── template            - 通过vm模板mock数据目录,js文件和页面vm模板文件名对应
|       ├── index.js        - vm模板mock数据
|
├── static                  - 静态资源目录
│   ├── css                 - css目录
│       ├── base            - 基础css目录,放置normalize以及通用类css文件
|           ├── normalize.css- normalize文件
|           ├── main.css    - 通用类文件
│       ├── fonts           - 字体目录
│       ├── mixins          - less的mixins目录
│       ├── modules         - css模块目录
│       ├── pages           - 页面对应的less文件
│   ├── js                  - css目录
│       ├── base            - 基础js目录,放置布局配置统计等通用js文件
|           ├── config.js   - 配置文件
|           ├── layout.js   - 布局文件
|           ├── stat.js     - 百度和谷歌统计文件
│       ├── bundle          - 编译后js目录
│       ├── modules         - js模块目录
│       ├── pages           - 页面对应的js文件
│       ├── vendor          - 不通过npm管理的第三方模块
|   ├── img                 - 图片目录
|   ├── media               - 音频视频目录
|
├── template                - 模板目录
│   ├── layouts             - 布局目录
│       ├── default.vm      - 头部和底部抽离
│   ├── index.vm            - vm模板文件
│  
├── preproduction           - 预生产目录
|
├── build                   - 生产目录
│
├── webacpk-config.js       - webpack配置文件
│
└── workpath.js             - 构建工具配置文件