基于nodejs前端工具集

jopen 10年前發布 | 41K 次閱讀 前端技術 NodeJS

基于nodejs前端工具集

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化

常見參數縮寫

  • -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 安裝即可

使用:需要操作的文件使用鼠標右鍵

基于nodejs前端工具集

卸載

npm uninstall -g feinit

項目主頁:http://www.baiduhome.net/lib/view/home/1406707437765

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!