前端編譯工具Prepros

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

功能特色：

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

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

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

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

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

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

使用說明：

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

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

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

編譯器設(shè)為Ruby，編譯排版依舊設(shè)為Expanded，這時(shí)，您已經(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>

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

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