情境
當在進行前端設計的時候,如果想要分享Html給夥伴看看,有哪些方式呢?
- 叫他過來看
- 截圖之後,傳line給他看
- 上傳到空間,丟網址給他看
今天介紹一個更快的方式,利用prepos免上傳,直接傳網址給他看。
本篇重點
Prepos的功能相當多,除了產生可以跨裝置的網址外,還可以編譯相當多語言,如LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml and Markdown等等,另外還可以做圖檔優化。
這次就
介紹Prepos這套軟體,從安裝到執行,一次搞定。注意:跨裝置限定區網
本篇範例使用prepos 4.0.1
安裝
link: http://alphapixels.com/prepros/
本篇是利用OSX做介紹,但是本套軟體在windows上也可以使用,操作基本上是接近的,所以不管是哪一個系統的使用者都可以快速上手。
在進入網站後,左方可以選擇下載的版本,大家就選擇要使用的版本下載吧(這次只會介紹他的免費版)。
下載後,只要就點兩下解壓縮
因為是網路上下載的,所以在prepos.app上按住cmd
+ 滑鼠左鍵
選擇打開
接下來會出現提示視窗,直接按打開就可以了。
另外他還有提供Install Chrome Extension的連結,可以安裝其Chrome擴充程式,但如果有安裝livereload,就可以不安裝它提供的擴充程式。
使用
這套操作界面很直覺,如果有使用過fire.app等等軟體,相信很快就能上手。
這次就拿aShare的原始版型檔做範例吧,只要把資料夾整個拖曳到prepos裡就可以了。
丟進去後,他就會列出這個專案裡所有可以編譯檔案。
每一個檔案,還能單獨設定其編譯設定。另外在下方有一個地球的圖案(Live preview),點擊後就會開啟瀏覽器,直接預覽網頁。
這邊就介紹我最喜歡的功能 跨裝置測試(Multi Device Testing),點擊Prepos右上方功能列,類似手持裝置的符號。
接下來就可以獲得跨裝置的資訊,只要在其他裝置輸入以上網址,或者是利用qrcode就可以預覽這個專案。
輸入以上網址,就可以看到Prepos全部的專案
選擇專案就可以開始預覽,如果沒有錯誤,就把這個網址傳給夥伴吧~。注意:跨裝置限定區網
跨裝置測試
這套軟體他的livereload和其他相似軟體不同之處,就是在跨裝置也可以livereload(免費版只能對於有編譯的檔案livereload),以下就來直接做範例給大家看吧。
這個是手機版上所看到aShare版型
接下來把Sass中的色彩變數改成紅色
於是乎,手機上的色彩就會自動轉成編譯後的色彩
結語
Prepos在概念上是很棒的一套軟體,在3.0.X版本的時候我就有接觸過,但是當時他經常性的編譯錯誤(有時候多按個save又編譯成功= =),所以我在使用時,都是開fire.app,然後關閉prepos的auto compile,僅使用它的跨裝置功能。而最近他出4.0.1版,有空可以多拿來玩看看還有沒有類似的問題。