前端編譯工具Prepros

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

功能特色：

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

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

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

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

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

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

使用說(shuō)明：

下載安裝成功后，打開(kāi)Prepros 界面如圖所示：

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

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

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

打開(kāi)sass.scss文件，寫(xiě)入腳本：

.mycolor {

    color: darkseagreen;

}

打開(kāi)index.html文件，引入css文件，

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

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

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

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

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