feinit

A toolkit for Front-end developer

npm install feinit
10 downloads in the last week
43 downloads in the last month

FEinit beta版

FEinit帮助界面

基于nodejs的前端工具集,因为是在windows系统开发,所以目前仅适合 windows 系统。

主要功能:

  • 提供前端项目中常用的工具集
    • 相对于grunt的task文件形式,FEinit的task是在命令行执行
    • 适合临时性、零碎的task需求
  • 通过template快速创建(前端)项目
  • 提供插件机制,每个FEer都可以开发自己的fe工具

环境要求:

  • 安装了nodejs
  • compass和sass需要ruby支持,我用的版本是2.0
  • windows系统如果添加右键失败,请更换管理组用户重试

开发匆忙,难免有bug,可以在线提issue

安装

npm install feinit -g
fe -h
fe -v

P.S.:安装最后会选择是否添加鼠标右键功能

fe -h or fe --help

查看帮助文件

template功能

生成(前端)项目的默认文件,可以指定自己电脑任意文件夹为项目模板(称为template),使用时:

  • 进入要创建项目的文件夹
  • 执行 fe init templateName
  • fe自动复制对应的template文件夹所有文件到当前路径

template帮助

fe template -h

fe自带默认项目的src文件夹结构如下

│  index.html             //首页
│
├─img                    //图片
│  └─pic                 //切图临时占位图片       
├─js                     //js文件夹
│      jquery.1.4.2.js 
│      jquery.1.8.2.js    
│      zepto.js
│
└─sass                   //compass sass文件夹
        _base.scss       //compass bass文件

支持的task

列出支持的task命令

## 获取task list
fe task

所有task支持查看帮助,使用 fe task_name -h 获取帮助,例如:

## 获取concat的帮助
fe concat -h

fe concat

功能

合并文件

基本语法
filename [files..] -o dest
## 举例
fe concat file1 file2 file3 -o concat

fe css

功能

合并css,支持import语法解析。

基本语法
fe css [options] filename [folder/files..] -o dest.css
## 举例
fe css a.css b.css -o ab.css
fe css -c a.css b.css -o ab.min.css
  • 选项
    • -c 压缩
    • -b 格式化
  • 默认
    • 合并
    • 压缩

fe js

功能

合并压缩js

基本语法
fe js [options] filename [folder/files..] -o dest.js
## 举例
fe js file.js file2.js -o min.js
fe js file.js file2.js -o min.js --noascii
  • 选项
    • -b or --beautify 格式化
    • --noascii 不ascii化,即不会将中文转为 \uXXX 格式
  • 默认
    • 压缩
    • 合并
    • ascii化

fe imagemin

功能

使用imagemin压缩图片

基本语法
fe imagemin [options] filename [folder/files..] -o dest.png
## 举例
fe imagemin file.png -o min.png
fe imagemin filepath

fe imgmin

功能

使用yahoo smushit压缩图片,压缩率高,但是国内环境经常连接超时

基本语法
fe imgmin [options] filename [folder/files..] -o dest.png
## 举例
fe imgmin file.png -o min.png
fe imgmin filepath

fe build

功能

将html中的引入的js和css合并到html中,支持压缩

基本语法
fe build [options] filename [files..] [-o] [dest.html]
## 举例
fe build demo.html demo2.html -b
fe build demo.html -o min.html --noascii
  • 选项
    • -b or --beautify 格式化
    • --noascii 不ascii化,即不会将中文转为 \uXXX 格式
  • 默认
    • 压缩
    • ascii化
style语法
  <!-- build:[style] -->
  <link rel="stylesheet" type="text/css" href="/path/to/css.css" />
  <!-- /build -->

output

  <style>
      .this-is-inline {
          font-weight: bold;
      }
  </style>
script语法
<!-- build:[script] -->
<script type="text/javascript" src="abc.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- /build -->

output

<script type="text/javascript">
    var abc = a;
    var jQuery = $;
</script>

fe base64

功能

base64图片,支持css内图片转base64,默认要求图片 < 4k

基本语法
fe base64 [options] filename [folder/files..] -o dest.png
## 举例
fe base64 file.png -o min.png
fe base64 path.css -o a.css
fe base64 path.css -o a.css --size 10k
  • 选项
    • -s 10k or --size 10k 最大10k图片
    • -s 0 or --size 0 图片不受限制
      • 支持:数字(byte),数字+K,数字+M
  • 默认
    • 图片体积大于4K不做base64处理

常见参数缩写

  • -h: --help //帮助
  • -l: --list //列表
  • -c: --create //创建
  • -e: --edit //修改
  • -rm: --remove //删除
  • -v: --version //版本

二次开发

支持二次开发和DIY自己的task,称之为plugin机制,即实现的一种插件机制,通过提供的接口实现一个task功能

命令 fe task --list 可以显示所有支持的 task 列表。

添加一个plugin

fe plugin -c my-first-task

上面命令在 fe 的tasks文件夹中创建了一个名字为 my-first-task.js 的文件,打开后您会看到基本内容已经写好了,您要做的就是专注于自己plugin的功能即可。

plugin开发完成后,使用:

## 查看帮助
fe my-first-task -h 
## 执行命令
fe my-first-task [options] [-o] [destOptions]

P.S.

  • plugin名称为字母、数字和下划线(_)组成,并且不得与之前的task重名

右键菜单

仅支持windows系统,安装时按照提示填写 Y 安装即可

使用:需要操作的文件使用鼠标右键

FEinit右键菜单

卸载

npm uninstall -g feinit

关于作者

npm loves you