<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          FEinit基于Nodejs? 的前端工具集

          聯(lián)合創(chuàng)作 · 2023-09-23 17:27

          FEinit 是基于Nodejs 的前端工具集,因?yàn)槭窃趙indows系統(tǒng)開發(fā),所以目前僅適合 windows 系統(tǒng)。

          主要功能:

          • 提供前端項(xiàng)目中常用的工具集

            • 相對于grunt的task文件形式,F(xiàn)Einit的task是在命令行執(zhí)行

            • 適合臨時性、零碎的task需求

          • 通過template快速創(chuàng)建(前端)項(xiàng)目

          • 提供插件機(jī)制,每個FEer都可以開發(fā)自己的fe工具

          環(huán)境要求:

          • 安裝了nodejs

          • compass和sass需要ruby支持,我用的版本是2.0

          • windows系統(tǒng)如果添加右鍵失敗,請更換管理組用戶重試

          開發(fā)匆忙,難免有bug,可以在線提issue

          安裝

          npm install feinit -g fe -h fe -v

          P.S.:安裝最后會選擇是否添加鼠標(biāo)右鍵功能

          fe -h or fe --help

          查看幫助文件

          template功能

          生成(前端)項(xiàng)目的默認(rèn)文件,可以指定自己電腦任意文件夾為項(xiàng)目模板(稱為template),使用時:

          • 進(jìn)入要創(chuàng)建項(xiàng)目的文件夾

          • 執(zhí)行 fe init templateName

          • fe自動復(fù)制對應(yīng)的template文件夾所有文件到當(dāng)前路徑

          template幫助

          fe template -h

          fe自帶默認(rèn)項(xiàng)目的src文件夾結(jié)構(gòu)如下

          │  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
          • 選項(xiàng)

            • -c 壓縮

            • -b 格式化

          • 默認(rèn)

            • 合并

            • 壓縮

          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
          • 選項(xiàng)

            • -b or --beautify 格式化

            • --noascii 不ascii化,即不會將中文轉(zhuǎn)為 \uXXX 格式

          • 默認(rèn)

            • 壓縮

            • 合并

            • ascii化

           

          常見參數(shù)縮寫

          • -h: --help     //幫助

          • -l: --list     //列表

          • -c: --create   //創(chuàng)建

          • -e: --edit     //修改

          • -rm: --remove  //刪除

          • -v: --version  //版本

          二次開發(fā)

          支持二次開發(fā)和DIY自己的task,稱之為plugin機(jī)制,即實(shí)現(xiàn)的一種插件機(jī)制,通過提供的接口實(shí)現(xiàn)一個task功能

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

          添加一個plugin

          fe plugin -c my-first-task

          上面命令在 fe 的tasks文件夾中創(chuàng)建了一個名字為 my-first-task.js 的文件,打開后您會看到基本內(nèi)容已經(jīng)寫好了,您要做的就是專注于自己plugin的功能即可。

          plugin開發(fā)完成后,使用:

          ## 查看幫助 
          fe my-first-task -h  
          ## 執(zhí)行命令 
          fe my-first-task [options] [-o] [destOptions]

          P.S.

          • plugin名稱為字母、數(shù)字和下劃線(_)組成,并且不得與之前的task重名

          右鍵菜單

          僅支持windows系統(tǒng),安裝時按照提示填寫 Y 安裝即可

          使用:需要操作的文件使用鼠標(biāo)右鍵

          卸載

          npm uninstall -g feinit

           

          瀏覽 23
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          編輯 分享
          舉報(bào)
          評論
          圖片
          表情
          推薦
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          編輯 分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  无码秘 人妻一区红中av漫画 | 美女骚搞黄色 | 亚洲最大在线 | 欧洲精品99毛片免费高清观看 | 日本黄色三级在线 |