前端編譯工具Prepros

Prepros是一款非常好用的前端編程工具，Prepros支持的編譯格式有很多種，包括Sass、Less、Stylus等。你可以通過這款軟件輕松處理所有預(yù)處理語言，讓編譯變的更加簡單。

功能特色：

1、編譯簡單：Prepros可以輕松編譯 LESS、Sass、SCSS、Stylus、Jade、CoffeeScript、Haml和Markdown。

2、無依賴：你只要安裝Prepros即可，無需安裝Sass和Compass。

3、靈活的CSS注入：Prepros可以自動編譯CSS并將其注入瀏覽器中，同樣適用于HTML和JS。

4、內(nèi)置HTTP服務(wù)器：沒有多余文件URL限制，Prepros內(nèi)置靜態(tài)HTTP服務(wù)器來測試所有Ajax請求。

5、Background File Watch：Prepros會監(jiān)視文件的變化，并實時編譯。

6、錯誤通知：文件沒有編譯通過？別擔(dān)心，Prepros將會自動報告錯誤。

使用說明：

下載安裝成功后，打開Prepros 界面如圖所示：

我建立了一個名為prepros項目，項目目錄下有個資源文件夾assets用于存放圖片等資源，assets同級目錄下創(chuàng)建了一個sass.scss文件，為樣式編譯文件，index.html為主頁。我們點擊sass.scss文件，界面變成如圖所示：

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

編譯器設(shè)為Ruby，編譯排版依舊設(shè)為Expanded，這時，您已經(jīng)可以順利編譯Sass文件了。

打開sass.scss文件，寫入腳本：

.mycolor {

    color: darkseagreen;

}

打開index.html文件，引入css文件，

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

寫入標(biāo)簽?zāi)_本：

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

點擊web調(diào)試按鈕，顯示效果如下：

此時，若修改了sass.scss，只要保存，Propres即會幫您自動編譯并刷新頁面，擺脫F5，很方便有木有。如果你調(diào)試的是移動端App項目，點擊移動端調(diào)試按鈕，即會生成二維碼，用手機掃一下就會看到該頁面的app效果。