65.9K
CodeProject 正在变化。 阅读更多。
Home

从 Slush 开始 - 第一部分

starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2016年7月7日

CPOL

4分钟阅读

viewsIcon

15967

Slush 是什么以及如何用它来构建 Web 应用程序

引言

在本文中,我旨在为您提供 Slush 的基本介绍(在此处查找:http://slushjs.github.io/)。 Slush 是一种脚手架工具,用于构建丰富的 Web 应用程序的样板,非常类似于流行的工具 yeoman (https://yeoman.node.org.cn/)但也具有自己的一组命令和生成器。请注意,Slush 不会为您的项目提供任何功能,而是提出大量工具和约定,以便在您的整个项目中遵循和维护。 Slush 的主要特点是它使用 gulp 进行项目脚手架。它使开发人员能够获得流式构建系统的巨大优势,而无需手动管理组件。  

生成器和 Gulp

您一定想知道 Slush 和 gulp 结合在一起有什么大惊小怪的。 如果您熟悉 Grunt,那么理解 Gulp 对您来说非常容易,并且您一定会发现它比 Grunt 本身简单得多。即使您不熟悉 Grunt,我也会给您一个简短的解释。但在此之前,让我们首先看看生成器。 

如果您之前使用过 Eclipse 或 Visual Studio,您可能已经注意到那些 IDE 中预装的项目模板。这些模板为您提供了一个基本结构,您可以从中开始从头构建项目。生成器的概念非常相似,它有助于使用不同的工具(例如 Bootstrap、AngularJS、Bower 等)来搭建一个常规项目结构。换句话说,您也可以使用生成器将组件添加到现有项目中。 Slush 为您提供了许多生成器选项供您选择,具体取决于您的项目需求。此外,您还可以创建自己的生成器,以满足您的需求。 

Gulp 是一个任务运行器,可帮助您自动化大多数重复性的开发任务。 Slush 使用 gulp 以非常直接的方式创建生成器,因为 Gulp 本身不需要太多的配置。 Gulp 提供了许多插件和模板,可以使用 gulp-template、gulp-install 等命令来生成应用程序。为了简化 gulp 作为生成器的使用,slush 提供了救援。使用 Slush,您无需担心其他必需的配置,只需坐下来让它使用 gulp 完成它的工作即可。 

从 Slush 入门

先决条件

1. 终端或 bash 或命令提示符的基本知识

2. 您的系统中已安装 NodeJS

安装

第一个要求是 Node.js,用于在您的系统中设置 Slush 和其他重要的软件包。如果您尚未安装 Node,可以在 https://node.org.cn/en/ 上找到它。继续安装它。通过键入以下命令 npm -v 检查安装。如果已安装 npm,您应该获得 npm 的版本检查,否则请尝试重新安装。 

npm -v

输出应如下所示: 

3.9.6

接下来,使用 npm 以以下方式全局安装 Slush CLI: 

npm install -g slush

等待几分钟,因为它会在您的本地 lib 中安装一堆东西。要验证安装,请键入以下内容: 

slush -v

它会立即显示您系统中安装的 slush 版本。

或者,您可以将 gulp 和 bower CLI 与 slush 一起安装,也可以手动安装以供将来使用。 Bower 是一个客户端包管理器,主要用于管理 Bootstrap、javascript 框架和库等软件包。 

npm install -g slush gulp bower

查找和安装生成器

前面的命令是 Slush 的基本设置。接下来,Slush 有一个由其优秀的社区成员开发的优秀生成器集合。您可以在此处 查看生成器,并选择最适合您需求的生成器。 angular-gulp 生成器非常流行,所以让我们安装这个生成器并搭建一个项目。安装任何生成器的简单语法是:npm install -g slush-<生成器名称> 

npm install -g slush-angular-gulp

搭建一个 Angular 应用程序

创建一个新的空项目文件夹,然后键入以下命令。这将引导您完成整个脚手架过程,并为您创建所有必需的文件夹和文件。  

slush angular-gulp

接下来,Slush 会询问您一系列交互式问题,以帮助您仔细选择您的项目依赖项。您无需进行任何配置,只需回答问题,然后放松一下即可。太棒了,不是吗?请查看以下屏幕截图中显示的脚手架过程。 

我为这个应用程序选择了名称“mysample”。项目文件夹看起来很像: 

 

运行应用程序

要查看所有这些操作,请使用 gulp serve 运行该应用程序。在此之前,请运行 npm install 和 bower install 以确认您的应用程序已在本地安装了所有必需的软件包。 

npm install && bower install

接下来,通过 gulp streamline 从终端提供文件。确保没有其他应用程序通过 gulp serve 运行,以防止发生任何可能的错误。 

gulp serve

 

结论

Slush 通过提供您所需的所有必要约定和结构来帮助您节省时间并提高工作效率。请务必查看生成器目录,以选择最适合您的生成器。使用其中的一些,您还可以找到由生成器本身搭建的示例应用程序,该应用程序将指导您完成项目的其余部分。此外,您可以使用 Slush 创建自己的生成器,我将在以后的文章中展示。祝您脚手架愉快! :)  

© . All rights reserved.