推薦一款優秀的前端切圖編譯工具：Prepros

有朋友讓我推薦一款優秀的前端切圖的編譯工具，寫篇部落格介紹一下。在我以往使用的前端編譯工具中，用的最有效率且最順手的要數Prepros，百度一下 "Prepros" 就可以找到這款工具的官網。Prepros支援的編譯格式有很多種，包括Sass、Less、Stylus等，我比較習慣於使用Sass，因此本篇以編譯Sass為例，詳細為大家介紹一下這款工具。

（注）如果您對Sass還不太瞭解，可以參考我的這篇文章《Sass快速入門》

 

Prepros擁有的強大功能特性及優秀的人性化設計：

（1）支援多種格式編譯，包括Sass, Less, Stylus, Jade等，在主流樣式編譯中總有一款您熟悉的。

（2）編譯成功後動態重新整理頁面，擺脫每次調整樣式後都要在瀏覽器按一次F5重新整理頁面看效果。

（3）Prepros依然支援原生Css，意味著如果您並不擅長使用樣式編譯，可以選擇原生寫法。

（4）同步支援web端和移動端，若您需要除錯移動端介面，Prepros會為您生成好二維碼，掃一下即可除錯。

（5）雖然為一款29美元的收費軟體，但從不勉強使用者交錢，您也可以免費使用所有功能，為它打Call。

 

先去Prepros官網下載這款軟體吧，下載安裝成功後，開啟Prepros 介面如圖所示：

我建立了一個名為prepros專案，專案目錄下有個資原始檔夾assets用於存放圖片等資源，assets同級目錄下建立了一個sass.scss檔案，為樣式編譯檔案，index.html為主頁。我們點選sass.scss檔案，介面變成如圖所示：

注意，右邊介面我的兩個設定，設為自動編譯，編譯排版格式為Expanded。此時若編譯sass.scss，你會發現還是編譯不過去，因為編譯器我們還得選擇一下，選中Settings選項，點選Compiler Settings，再選中Sass，修改 一下Sass編譯器，如下圖所示：

編譯器設為Ruby，編譯排版依舊設為Expanded，這時，您已經可以順利編譯Sass檔案了。

開啟sass.scss檔案，寫入指令碼：

 

.mycolor {
    color: darkseagreen;
}

開啟index.html檔案，引入css檔案，

 

<link rel="stylesheet" href="assets/sass.css" />

寫入標籤指令碼：

 

<div class="mycolor">Hello China</div>

點選web除錯按鈕，顯示效果如下：

此時，若修改了sass.scss，只要儲存，Propres即會幫您自動編譯並重新整理頁面，擺脫F5，很方便有木有。如果你除錯的是移動端App專案，點選移動端除錯按鈕，即會生成二維碼，用手機掃一下就會看到該頁面的app效果。