推荐一款优秀的前端编译工具:Prepros

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/79201776

有朋友让我推荐一款优秀的前端编译工具,写篇博客介绍一下。在我以往使用的前端编译工具中,用的最有效率且最顺手的要数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效果。


猜你喜欢

转载自blog.csdn.net/zeping891103/article/details/79201776