yeoman_如何使用Yeoman简化Web开发流程

有许多用于构建Web应用程序的工具，但是将它们组合在一起并使它们适合我们的工作流程可能会非常麻烦。 在构建Web应用程序时，我们也倾向于执行重复性的任务，例如创建文件，创建文件夹，安装许多前端库。 如果我们可以简化此任务以节省时间，岂不是更好吗？

我们可以使用Addy Osmani创建的便捷工具Yeoman。 在这篇文章中，我们将看到Yo，Bower和Grunt在Yeoman的领导下如何一起工作，以从开发开始到部署Web应用程序为该项目提供便利。

关于约曼

Yeoman包含三个前端开发工具：

哟

Yo提供了许多生成器，用于生成用于构建新Web应用程序的支架 。 大约有400个生成器可用，您可以通过NPM（节点程序包管理器）搜索和安装它们。 提供了许多生成器来满足不同类型的Web应用程序的需要，例如HTML5 Boilerplate，AngularJS，Bootstrap等。实际上，您可以根据需要构建自己的自定义生成器。

凉亭

使用前端软件包管理器Bower，您可以管理项目库（例如jQuery和Normalize.css）或您通常在网站上使用的其他库。

咕unt声

Grunt减少了在开发过程中执行某些任务所需的工作量。 使用Grunt可以自动完成诸如将Javascipt压缩和连接，生成LESS或SASSCSS，压缩CSS以及优化图像之类的任务。

Yeoman随附了这三个前端开发工具预设的配置。 Yeoman提供了脚手架和程序包管理器，并设置了所有Grunt任务，用于编译CSS预处理器 ， lint 脚本 ，运行内置服务器， 优化图像等。

Yeoman入门

Yeoman在Node.js上运行，因此请确保先安装Node.js和npm 。 然后，要安装Yeoman，只需在命令提示符或终端中运行以下命令：

npm install -g yo

此命令将Yo，Bower和Grunt一起安装。

安装Yeoman之后，我们可以使用命令行启动一个Web应用程序项目。 如上所述， Yo帮助您使用Generators为您的Web应用程序生成支架。 作为示例，在这里我们将安装约曼官方的一个Generators，称为generator-webapp 。

npm install -g generator-webapp

此命令将下载几个通常用于创建Web应用程序的组件，例如HTML5 Boilerplate，jQuery，Modernizr和Bootstrap。

现在，一旦下载了generator-webapp的所有组件，请为您的应用程序创建一个文件夹，然后在该文件夹中运行yo webapp命令以开始为新的Web应用程序项目生成支架。

Yeoman将使用generator-webapp中的组件来设置您的项目，并询问您希望在项目中使用哪个库，如以下屏幕截图所示。 做出选择，在文件夹中，您会发现Bower和Grunt精心整理的所有文件。

通过Yeoman生成Bootstrap

现在，我们将尝试由社区提供的另一个Generator ，称为bootstrap-less 。 该生成器包含HTML5 Boilerplate，jQuery，Modernizr，Bootstrap，FontAwesome和Grunt任务，这些任务会将LESS编译为CSS。

要安装此Generator，请运行以下命令：

npm install -g generator-bootstrap-less

同样，为您的项目创建一个新文件夹。 然后跳转到该文件夹​​并运行以下命令，以使用Bootstrap为您的Web应用程序生成支架：

npm bootstrap-less

再次，我们将与Yeoman的提示进行交互，以选择运行项目所需的组件。 如下所示，您可以一起选择Bootstrap JavaScript文件和FontAwesome。

完成后，让我们重新访问项目文件夹。 现在，您应该找到生成的文件夹和文件，如下所示：

该项目还配备了Grunt服务器，这使我们可以为Web应用程序运行本地Web服务器。 我们可以使用以下命令运行服务器：

grunt serve

完成后，该页面将立即在浏览器中打开。 如果开发过程中有任何更改，此命令还将监视我们的文件。 无需引导程序的生成器附带可自动编译LESS文件的配置。

转到文件夹app / styles以查找main.less文件。 从这里我们可以修改此文件，Yeoman对其进行处理，浏览器将自动重新加载页面，然后我们将看到更改。

最后，我们使用grunt命令来构建我们的应用程序。

最终思想

Yeoman是用于开发Web应用程序的多功能工具。 它可以帮助您提高启动新Web应用程序项目的效率，并使所有工具均可用于生成支架，测试和部署Web应用程序，因此您可以仅专注于编码。

翻译自: https://www.hongkiat.com/blog/yeoman-getting-started/