tinder - 方便自己建立 Prototype 的小工具 (Node.JS)

此篇文章最近更新時間為2014-04-13 21:01:55 目前共有2篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

身為前端工程師,時常需要藉由小的 Prototype(原型)來驗證可行性、或者是學習新的技術。這也是為什麼 codepen.iojsFiddle 會這麼受歡迎的理由。而個人還是比較偏好在 CLI 環境下以自己最熟悉的 Vim 來做 Prototype,但還需要一些基礎環境建設:像是獨立的 Web Server、可以運行 LiveReload、Coffee、Compass、Jasmine 等工具。其實 RailsYeomanFire.app 都是不錯的選擇。

以上的工具都很不錯,但是也都有一些我不太喜歡的小缺點:例如在澳洲比較沒有辦法網路吃到飽,但 Yeoman 及 Rails 都得連線做套件的安裝、就算網路沒問題,也至少得花兩三分鐘安裝套件、Yeoman 的 GruntFile 有一點複雜、Fire.app 基本上是 GUI 工具... 啊啊!乾脆自己寫一個吧!於是乎就做了一個叫 tinder (火種)的 CLI 工具 XD

tinder 是什麼?

tinder

對我來說,做 Prototype 就像生火一樣,我需要火種 (tinder) 的協助才能將火順利燃起,命名由此而來。這個火種 CLI 在安裝後,不需要網路連線,就會幫你把 LiveReload、CoffeeScript、Compass、獨立 Web Server 的環境快速架起來(當然也已經安裝好 jQuery、Bootstrap、AngularJS 等必備前端函式庫)

基本上它就是一個 Prototype 的 Folder、用 gulp.js 配合 Connect 把整個 precompressor (Coffee + Compass + LiveReload) 給跑起來。

另外多做的就是 bin/tinder.coffee 與 index.coffee 這兩支用於 CLI 的 Script、讓你可以把此 Folder 安裝到電腦的任何地方、並且設置環境。

安裝 tinder

目前只在我的 Mac 上做開發與測試,電腦上需要先裝好 coffee、git、npm、wget、tmux 等工具。直接在 CLI 輸入以下指令即可安裝:

wget -O - https://raw.githubusercontent.com/josephj/tinder/master/install.sh | sh

基本上它就是 npm install . -g 再加上一些處理 File Layout 的小指令。安裝完後你會得到 tinder 這個指令。

建立 Prototype

只要執行下列指令即可建立一個新的 Prototype 專案:

tinder new hello-world

等於是複製一份 tinder 的 Repo、但把 git history、CLI 的相關 Script 給移除而已。

開發 Prototype

接著就是進去 Prototype 的目錄、把 Web Server 跑起來、並且打開 vim 開發:

cd hello-world; tinder server

它會開啟 tmux 的新 Session把 Server 跑起來(預設 8000、你可以用 tinder server --port=1234 指定不同的 Port)、並且幫你把 Vim 的 Layout 給切好

結語

基本上你可以把它想成 CLI 版的 codepen.io,但就是非常地偏向我個人的需求、也不需要網路連線。我還會繼續調整一些功能(例如:指定 Prototype 類型,例如 Angular 或 Form、檔案只留 .coffee、.sass 而不需要一份 *.js 與 *.sass、Deploy 到 Heroku/codepen.io/gist)覺得還不錯的話歡迎大家 fork 修改或提供 pull request 囉!

GitHub - josephj/tinder



Comments

  1. Emre 2014-05-30 19:43:50
    Got it! Thanks a lot again for henpilg me out!
  2. tomchentw 2014-05-26 00:59:24
    看名稱還以為是 http://www.gotinder.com/
    XD
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment