推荐一款优秀的前端编译工具：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文件，

写入标签脚本：

Hello China

点击web调试按钮，显示效果如下：

此时，若修改了sass.scss，只要保存，Propres即会帮您自动编译并刷新页面，摆脱F5，很方便有木有。如果你调试的是移动端App项目，点击移动端调试按钮，即会生成二维码，用手机扫一下就会看到该页面的app效果。

转载于:https://my.oschina.net/u/3987720/blog/2962738