使用Prepros进行多语言预处理-CSDN博客

在当今的Web开发中，预处理扮演着重要的角色。预处理语言（也称为预处理器）使编写HTML，CSS和JavaScript更快，更轻松，更灵活。但是在使用它们之前，我们需要在计算机上安装和配置它们。

当我们仅使用一个脚本时，这不是什么大问题。但是通常我们的项目需要将多个预处理器组合在一起，然后事情会变得有些复杂。我们需要安装所有需要的语言并正确设置它们以编译文件。当然，这意味着额外的工作。幸运的是，有一个更简单的解决方案–多合一解决方案。

Prepros ，通过创建Subash帕塔克，是一个工具，可以自动处理我们所有的预处理需求。它是类似于CodeKit的开源GUI编译器，用于预处理语言，如LESS，Sass，Compass，Stylus，Markdown，CoffeeScript等。使用Prepros，多语言预处理不再是问题。它可在Win和Mac上运行，并且自2013年5月1日首次发布以来，一直积极开发并定期添加新功能。

听起来不错？好。让我们快速看一下Prepros可以为我们做些什么。

特点和优点

您可以在下面找到Prepros在撰写本文时提供的所有出色功能和优点的概述：

多合一的多语言解决方案。 Prepros可以编译当今最流行的预处理语言。其中包括：LESS，Sass，SCSS，Compass，CoffeeScript，LiveScript，Stylus，Jade，Slim，Markdown和Haml。
没有依赖关系。只需安装Prepros，您就可以顺利进行。没有其他要安装或配置的内容。不要在命令行上乱七八糟。只需运行该应用程序即可开始工作。很简单。
简洁，功能强大的GUI界面。再见命令行:)
多个定制级别。您可以为所有项目全局配置Prepros，尤其是为每个项目和每个文件分别配置。每个文件可以根据需要手动或自动编译。
JavaScript缩小和串联。每当您在编辑器中更改文件时，Prepros都可以实时缩小和连接JavaScript文件。
图像优化。 Prepros只需单击一下即可优化PNG，JPG和GIF图像，以加快页面加载时间并改善网站的整体性能。
@imports检测和监视。 Prepros会监视您的文件是否更改并即时进行编译。
内置http服务器。 Prepros内置了一键式静态http服务器来测试所有文件，而没有文件URL限制。
实时浏览器刷新。只要对文件进行更改，Prepros即可实时刷新浏览器。如果您使用内置的http服务器，则此功能可在Firefox，Chrome，Opera和IE10中使用，但是要使用自定义服务器或文件URL，必须安装浏览器扩展。
多设备实时刷新。 Prepros支持在连接到网络的多个设备中测试您的网页。每当您对文件进行更改时，它都会实时刷新所有浏览器和设备。
错误和成功通知。每当文件成功编译时，Prepros都会通知您，每当编译失败时，它都会弹出一条错误消息并记录该错误，以便于调试。
它是跨平台的（当前在Win和Mac上运行）。
它是完全免费和开源的。

怎么运行的

要使用Prepros，您需要做的第一件事就是拥有一个项目。项目只是一个文件夹，其中包含所有放置在同一文件夹和/或子文件夹中的所有预处理文件。要添加项目，只需将项目文件夹拖放到应用程序窗口中，Prepros将列出它可以编译的所有文件。

当一个文件由另一个文件导入时，导入的文件不会显示在文件列表中，但是只要对导入的文件进行更改，导入的文件就会在后台监视，并且父文件会被编译。另外，您还必须记住，在将新文件添加到项目文件夹或从另一个文件导入一个文件之后，必须刷新项目以查看更改。

添加项目后，Prepros会提供许多选项，您可以根据需要自定义这些选项。

您可以分别配置每个文件。只需选择它，然后在应用程序窗口右侧显示的面板上编辑设置即可。

您还可以使用应用程序窗口左下角的工具栏来管理项目。选择项目后，可以通过单击项目工具栏上的齿轮图标来打开“ 项目选项”窗口。

项目选择

对于全局配置，您需要打开Prepros Options窗口。只需单击应用程序窗口右上角的菜单图标，然后选择Prepros Options 。在这里，您可以设置适用于所有项目的选项。

prepros选项

试试看

现在，让我们进行一次快速测试，以查看运行中的应用程序。首先，请为您的操作系统下载并安装Prepros版本。

我们将在示例中使用LESS和CoffeeScript来演示应用程序的工作方式。首先，您需要创建一个名为“ Prepros Testing”的项目文件夹。还添加“ css”和“ js”子文件夹。然后创建一个具有以下内容的test.html文件：

<!DOCTYPE  HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Prepros Test</title>
    <link href="css/test.css"  rel="stylesheet" type="text/css" />
    <script src="js/test.js"  type="text/javascript"></script>
</head>

<body>

<hr />

<div  class="round-rect"></div>

</body>
</html>

在head部分，我们将添加对要由Prepros编译的文件的引用。然后在body部分，添加一个带有round-rect,类的div ，将其用于CSS演示。

文件夹结构

接下来，创建test.less文件并将其放在“ css”文件夹中。代码如下：

.rounded-corners  (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
   border-radius: @radius;
}

.round-rect {
    width: 100px;
    height: 100px;
    background-color: orange;
    .rounded-corners(10px);
}

好。现在在“ js”文件夹中创建test.coffee文件。代码如下：

square = (x)  -> x * x
cube   = (x) -> square(x) * x
getCube =  ->
  document.write "The result is: " +  cube(4)

getCube()

现在我们可以进行测试了。首先启动Prepros并添加我们的测试项目。

prepros应用

然后右键单击项目名称，然后选择“ 编译所有文件” 。如果查看“ js”和“ css”文件夹，您会看到Prepros已自动创建了test.js和test.css 。

现在，在项目工具栏中单击“ 打开项目实时URL （地球图标）”，然后选择test.html 。您应该看到“结果为：64”语句，以及下面的橙色圆形矩形。

打开test.coffee并确保同时看到浏览器和编辑器。现在，只需将cube()函数中的参数从4更改为8 。保存文件后，您应该立即在浏览器中看到所做的更改。然后打开test.less ，将半径从10px更改为100px并保存。您现在应该看到一个橙色的圆圈。

试验结果

好。有用。恭喜你！您的新秘密Web开发武器已成功测试并可以使用。

结论

如您所见，Prepros可以极大地简化您的预处理工作流程。这只是艰苦的工作，却为我们留下了很酷的东西。预处理是一项强大的技术，由于有了Prepros之类的应用程序，我们可以轻松高效地利用它。

本文只是对该出色的预处理工具的快速介绍。有关此处未提及的更多详细信息，请检查Prepros网站上的文档。

From: https://www.sitepoint.com/multilingual-preprocessing-with-prepros/