三、使用 NPM、前端包管理器和任务运行器

在本章中，我们将学习以下食谱:

• 使用和创建 npm 模块
• 使用 Bower 管理前端依赖关系
• 用 Grunt 编译 LESS 文件到 CSS 文件
• 使用 Gulp 绑定和缩小 JavaScript 文件
• 使用 Yeoman 代码生成模板
• 使用 JSPM

介绍

在本章中，我们将学习 Node.js、Node 模块、包管理器和任务运行器。 ASP.NET Core 中，我们有不同的选项来管理包:NuGet、节点包管理器(npm)、Bower 和 JSPM。 大多数时候，NuGet 被用来管理服务器端库的。net 包，但它并不一定要被使用。 我们将在下一章讨论 NuGet。 npm 管理 Node.js 的 JavaScript 包和模块。 Bower 处理前端依赖关系(如 JavaScript、CSS 和其他东西，如字体)。 JSPM 的工作与 Bower 相同，但也在运行时将 JavaScript 文件作为 AMD 模块加载和编译。

在本章中，我们将探索所有这些管理客户端依赖关系的方法，以及如何使用 Node.js 世界中最著名的两个任务运行器，即 Grunt 和 Gulp。

使用和创建 npm 模块

Node.js(https://nodejs.org/en/)是一个基于 Chrome V8 JavaScript 引擎的异步、单线程的 web 服务器。 它执行服务器端 JavaScript 编译的代码，并且它是基于事件的，就像 JavaScript 一样。

npm(https://www.npmjs.com/)管理由开源 JavaScript 库组成的 Node.js 包生态系统。 我们将使用命令行使用 npm，并以这种方式安装所有的节点包或模块。

我们还可以使用 npm 作为快速构建的管道来开发、测试、最小化和部署我们的应用。

在本食谱中，我们将学习如何创建和发布我们自己的节点包。

准备

Visual Studio 2015 Community Edition 的安装包括 Node.js 的安装，这是我们将在本书中描述的过程中使用的 IDE。 如果，由于某些原因，Visual Studio 2015 没有安装 Node.js，我们可以通过进入 Node.js 下载页面https://nodejs.org/en/download/来安装它。 npm 将安装在 Node.js 中:

我们可以从前面的截图中看到，安装 Node.js 也会安装 npm。

怎么做……

在这里，我们将看到如何创建和发布一个节点包。

创建节点包

1. 让我们在当前所在的文件夹中创建一个 node 包:

npm init 

1. 我们将回答一系列问题(关于作者、名称、许可证等)，这些问题将填充将要创建的package.json文件。 按进入每个问题将给出问题的默认答案:

1. 我们也可以输入以下命令行来做同样的事情，用默认的答案填充所有的问题:

npm init -y 

发布包

1. 首先，让我们在 npm 网站上创建一个账户:

1. 现在，我们可以使用命令行使用凭证连接到存储库。 存储库将是 Git。 让我们输入以下内容:

npm adduser 

1. 我们回答三个关于用户名、密码和电子邮件的问题:

1. 之后，我们在本地创建 Git 存储库，输入以下命令:

git init  

1. 现在让我们去 GitHub 网站创建一个远程存储库。 首先，我们需要创建一个帐户，如果我们还没有的话。
2. 要创建一个帐户，我们需要在 GitHub 创建帐户页面上填写表格，这将提供project.json:

git remote add origin 'repo-url-adress'

npm init 

Create a repository on your GitHub account:

1. 要在 GitHub 在线存储库上推送package.json，输入以下信息:

git add . 

git commit -m "my comment" 

git push 

git push origin master 

1. 现在让我们在本地项目的 Git 存储库中输入以下内容:

npm publish 

如果我们执行以下命令，我们可以看到package.json:

npm info [packagename] 

执行如下命令:

npm repo [packagename] 

在我们的 GitHub 存储库网站上发布了一个网页，列出了我们的 npm 包的现有文件。

如果我们在浏览器地址栏中输入http://npm.im/packagename，我们将在 npm 网站上看到我们的包主页。

我们可以在 npm 网站https://www.npmjs.com/上找到我们的节点包，与我们的GitHub网站https://github.com/存储库同步。

它是如何工作的…

包和模块的区别如下:模块包含一个单一的 JavaScript 文件，它具有某些功能。 包是一个包含几个模块的目录，每个模块都有一个元数据文件。 此元数据文件将是一个package.json文件，用于创建脚本和跟踪依赖项。

我们将在 ASP 的根目录中找到这个文件。 网的核心项目。 它将列出应用中使用的节点包。

Asynchronous module definition (AMD) is a concept or pattern that is used to provide a solution to create modular code in several JavaScript files and load them separately and asynchronously, even if they are interdependent.

有更多的…

1. 要运行脚本，输入以下命令:

npm run [nameofthescriptwithextension] 

1. 安装软件包时，输入如下信息:

npm install [nameofthepackage] 

1. 要安装软件包并将依赖项保存在package.json中，输入以下命令:

npm i [nameofthepackage] -S 

1. 要列出计算机上安装的所有节点包，输入以下命令:

npm list -global true

//Or 
npm ls  

1. 要安装一个全局使用的包，在后面加上-g:

npm install gulp -g 

1. 升级 npm 时，输入如下信息:

npm I npm@latest -g 

使用 Bower 管理前端依赖关系

Bower 是一个前端包管理器。 它在 web 开发世界中用于安装和卸载 JavaScript 和 CSS 框架，包括它们的字体。 官方文档请参见:http://bower.io/。

在本教程中，我们将学习如何使用 Bower 管理前端依赖项。

准备

假设我们已经安装了 Visual Studio 2015 社区版，这是 Visual Studio for Windows 的免费版本。

怎么做……

1. 在 ASP 中使用 Bower 安装前端依赖。 我们只需要在解决方案资源管理器中右键单击项目名称，并在上下文菜单中选择 Manage Bower Package:

使用浏览器包管理窗口，我们可以安装、卸载或更新 Bootstrap、jQuery、AngularJS 等包。 “管理 Bower 包”对话框现在打开:

1. 让我们通过单击 install 按钮来使用 Bower 安装LoDash库。

我们可以在输出窗口中看到，Visual Studio 内部使用了 Bower 的命令行，我们可以自己使用这些命令行，而不需要 Visual Studio，从 Bower 安装包。 我们可以看到下载版本依赖的位置(在这个例子中是 GitHub)和目标文件夹:

它是如何工作的…

每个新安装的包将被放置在wwwroot文件夹内的lib文件夹中。 这个根文件夹公开了 HTTP 请求访问的所有文件。 它包含应用的所有静态文件:

在wwwroot文件夹中，每个依赖项都有自己的文件夹，在这个文件夹中，每个依赖项都有自己的.bower.json文件。 这个 JSON 文件描述了与客户端框架相关的所有信息。

打开位于lodash文件夹中的.bower.json文件，我们可以看到一个 JSON 对象，其中包含name、main文件、version、license 和依赖项(如果包中有的话):

关于 Bower 包的全局信息将在应用根目录的bower.json文件中可见，尤其是应用中已安装的依赖项列表。 我们可以在下面的截图中看到这个文件的详细信息:

在名为Dependencies的项目文件夹中，就在wwwrooot下方，我们也可以看到如下截图中的列表:

在 Bower 之前，NuGet 是所有依赖项的唯一包管理器。 我们现在将使用 NuGet 来处理。net 外部依赖项，使用 Bower 来处理前端依赖项(JavaScript、CSS、字体等等)。 安装任何版本的 Visual Studio 时，都会安装 Bower，它与 Node.js 世界一起提供 npm、Gulp 和 Grunt。 我们也可以通过使用https://www.npmjs.com/package/bower链接将其安装为Node模块，这样我们就可以在安装了 Node.js、npm 和 Git 之后，无需 Visual Studio 与其他 IDE 一起使用它。

有更多的…

使用 Bower，我们也可以创建自己的包，但这不是这个配方的一部分。

另请参阅

创建上述方案,请参阅 Pluralsight(https://www.pluralsight.com/)课程鲍尔基本面乔埃姆斯的https://www.pluralsight.com/courses/bower-fundamentals【5】。

用 Grunt 编译 LESS 文件到 CSS 文件

在本教程中，我们将学习如何使用名为 Grunt 的任务运行器将 LESS 文件编译为 CSS 文件。

准备

对于这个配方，我们假设你已经安装了 Visual Studio 2015 Community，并且安装程序自动安装了 Node.js 和 npm。

在那之后，我们将必须安装所有需要的模块来执行我们想要运行的所有任务。

怎么做……

我们可以用两种方式使用 Grunt:

不使用 Visual Studio，通过命令行，使用命令提示符，Node.js, npm，安装和使用所有你需要的模块来执行我们想要运行的所有任务。

安装 Visual Studio 2015 社区版和 Visual Studio 扩展，允许我们在 Visual Studio 用户界面中运行这些任务。

在本食谱中，我们将在这两种方式中的第二种中使用 Grunt，使用 Visual Studio 将 LESS 文件编译为 CSS 文件:

1. 要安装 Grunt，让我们打开package.json，或者如果我们从一个空项目开始，只添加一个package.json文件。
2. 让我们在devDependencies部分输入 grunt。 智能感知将帮助我们找到 Grunt 包:

1. 在那之后，我们输入版本。 智能感知也将帮助我们在所有可用版本中找到正确的 Grunt 版本。 grunt软件包将自动下载:

选择您想要使用的软件包版本。

1. 我们还可以观察到在Dependencies中的新npm文件夹，其中包含了刚刚安装的新Node模块，以及它的所有依赖项:

1. 让我们创建一个名为site.less的.less文件，在wwwroot/css文件夹中选择 file | New item:

1. 让我们添加两个 grunt 包:
   • 将.less文件编译为.css文件。
   • grunt-contrib-watch自动执行该任务，实时观察.less文件的修改情况:

1. 让我们通过右键单击应用并选择 Add | New Item | DNX |客户端来创建Gruntfile.js:

1. 让我们将以下代码行添加到initConfig方法:

pkg: grunt.file.readJSON('package.json')

1. 让我们创建 less 任务，它将把一个.less文件编译成一个.css文件。
2. 我们在grunt.config之后添加以下代码，以确保我们的任务使用正确的插件:

grunt.loadNpmTasks('grunt-contrib-less');

1. 然后我们将添加以下代码来注册这个任务为默认的grunt任务:

grunt.registerTask('default', ['less']);

让我们刷新gruntfile.js:

1. 刷新gruntfile.js后，我们可以看到刚刚创建的.less任务:

1. 现在让我们通过在任务运行器浏览器中右键单击任务的名称来运行任务:

我们可以看到 Visual Studio 生成的命令行:

现在我们还可以看到生成了.css文件:

我们可以看到已经生成了.css代码:

它是如何工作的…

在网页开发者的工作中，他们需要执行许多重复的任务: 缩小或压缩文件)(删除空白,bundlisation(形成一个文件的多个文件,所以只有一个文件,只使用一个 HTTP 请求发送一些文件到客户端),CSS 和 JavaScript 验证,编译和代码检查打印稿,CoffeScript,或 CSS 预处理器, 最小化和优化图片，这样你就可以根据你的应用运行的不同平台得到不同版本的图片。

所有这些任务都可以由任务运行器完成。 所有的任务运行器都使用 Node.js，并且由 JavaScript 编写的插件组成(就像在 Node.js 上工作的所有插件一样)。 Grunt 是 Node.js 中较老的任务运行器，拥有超过 4000 个插件，是最著名的一个。

有更多的…

还有其他方法可以安装和使用 Grunt。 当使用 Visual Studio 2015 时，我们可以安装一个名为 Grunt Launcher 的 Visual Studio 扩展。 这个扩展将启动 Grunt, Gulp 和 Bower 命令在 Visual Studio 中，当你右键单击你的应用的gruntfile.js。

有两种安装方式:

• 从 IDE 菜单中进入工具|扩展和更新|在线|搜索|任务运行器资源管理器
• 从https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff下载扩展名为.vsix文件

另请参阅

我们还可以从同一个创建者 Mads Kristensen 那里下载 Web 扩展包(https://visualstudiogallery.msdn.microsoft.com/f3b504c6-0095-42f1-a989-51d5fc2a8459)。 这个包安装一些非常有用的 web 开发扩展 Visual Studio 内使用,如 web 必需品,web 编译器(编制少、Scss 笔、JSX 和 CoffeeScript 文件),打包机和缩小镜(捆绑和缩减 JS、CSS 和 HTML 文件),和图像优化(无损优化 png, jpg 和 gif)。

使用 Gulp 绑定和缩小 JavaScript 文件

在本教程中，我们将学习如何使用 Gulp 任务运行器绑定和缩小两个 JavaScript 文件。

准备

我们假设你已经安装了 Visual Studio 2015 社区版，并且安装程序自动安装了 Node.js 和 npm。 下面是两个需要捆绑和缩小的 JavaScript 文件:

让我们看看这两个文件中的第一个的代码:

下面是第二种方法的代码:

怎么做……

1. 首先，我们将 Gulp 添加到package.json和Gulp插件中。 然后我们需要最小化并绑定这两个 JavaScript 文件，如果这个文件在 web 应用中不存在:

1. 我们添加了gulp-concat插件，它连接(bundle)文件，然后添加gulp-uglify，它缩小.js文件，删除空白和注释，并将我们想要添加的模块名称写到devDependencies部分:

1. 让我们创建一个gulpfile.js(gulp 配置文件):

2. 生成的文件包含以下代码:

1. 让我们添加以下代码来存储我们要操作的文件路径:

路径变量表示wwwroot文件夹。

path.js文件表示wwwroot/js文件夹中的所有 JavaScript 文件。 path.minJs表示wwwroot/js文件夹中扩展名为.min.js的所有缩小后的 JavaScript 文件。 path.concatJsDest表示名为site.min.js的 JavaScript 文件，是前两个 JavaScript 文件文件夹缩小后的结果。

1. 让我们添加以下代码来创建任务:

我们需要一个 Node.js 函数来获取对Gulp插件或Node模块的引用:

在gulp.task内部，我们创建所有要执行的任务，并将 default 重命名为min:js。 我们将链接这些管道函数来并行运行这些插件:

gulp 任务现在存在于 gulpfile 任务列表中:

我们可以看看 Output 窗口中执行的命令行:

site.min.js文件现在由min:js任务生成，它是缩小并连接script1.js和script2.js:的结果。

它是如何工作的…

和 Grunt 一样，Gulp 也是一个 Node.js 模块，它帮助我们在 web 开发中运行频繁的任务。 对于 web 开发中的许多常见任务，我们可以同时使用 Grunt 和 Gulp。 Grunt 更老，基于文件，并且比 Gulp 有更多的插件(大约 4500 个)。 Gulp 更年轻，基于流，有超过 100 个插件，而且性能更好，因为它使用 Node.js 流异步特性。

在将应用发送到生产环境中之前，最小化和绑定是 web 开发中的两个必须完成的任务。

在旧版本的 MVC 中，为了执行这些任务，我们通常用 c#编程方式为 JavaScript 和 CSS 文件创建包，放在BundleConfig.cs文件中，存储在App_Start文件夹中:

这段代码创建了两个包，一个用于 jQuery 文件，另一个用于 CSS 文件:

有更多的…

有关 Gulp 食谱，请访问https://github.com/gulpjs/gulp/blob/master/docs/recipes/README.md

使用 Yeoman 代码生成模板

Yeoman(http://yeoman.io/)是一个代码生成器工具。 根据特定的 web 技术，它可以生成项目模板中所需的所有必要文件。 Yeoman 允许我们生成完整的项目模板，也可以生成代码片段或可选功能，我们可以在我们的项目中使用。 它们被称为子生成器。

在本教程中，我们将学习如何安装 Yeoman 并在 Windows 中使用它。 我们将创建约曼生成器和子生成器。

准备

我们假设你的电脑上已经安装了 Node.js (Node.js 和 npm 一起安装)。 我们还将假设您已经安装了 Visual Studio Code。 我们已经在之前的菜谱中讨论过使用 Gulp捆绑和缩小 JavaScript 文件的轻量级跨平台 Visual Studio 版本。

Visual Studio Code 将帮助我们实现在一个不包含项目模板的 IDE 中使用 Yeoman 的价值。

怎么做……

1. 要安装 Yeoman，输入以下命令:

npm install -g yo

1. 让我们访问 Yeoman generators 网页(http://yeoman.io/generators/)来查看所有可用的生成器:

1. 让我们通过为 ASP 选择一个scaffolding项目来安装一个 Yeoman 项目模板.NET Core:

npm install -g generator-aspnet

1. 要安装约曼生成器，输入以下信息:

npm install -g generator-[NameOfTheGenerator] 

1. 通过输入以下命令启动 Yeoman:

yo

1. 选择Install a generator:

1. 当 Yeoman 为我们提供发电机时，键入aspnet。 约曼应该提出一份与研究相对应的发电机清单。

2. 我们可以通过移动光标来选择我们想要使用的。 在我们的例子中，第一个是Yeoman generator for ASP.NET 5:

1. Yeoman 将安装 ASP.NET 5 发电机:

1. 现在我们可以在生成器列表中看到已安装的生成器:

1. 让我们创建一个文件夹来保存应用:

mkdir AspnetYeomanWebapp

cd AspnetYeomanWebapp

1. 让我们在刚才创建的文件夹中启动 VS Code，输入以下内容:

code .

1. 让我们也创建一个 ASP.NET 5 项目模板与约曼通过输入以下:

yo aspnet 

上述代码的输出如下:

1. 现在让我们选择 Web Application。

2. Yeoman 将询问我们将要生成的新应用的名称。 我们可以看到为我们生成的所有文件:

1. 我们还可以看到生成的bower.json，列出了我们项目中所有的前端依赖项:

1. 我们还可以看到在这个项目模板中生成的Gulpfile.js和所有自动生成的任务:

1. 现在我们恢复丢失的程序集并构建生成的应用:

dnu restore

1. 让我们运行应用:

dnx web

此命令行将执行在project.json中指定的命令，该命令对应于命令部分中的 web。 这个命令将启动Kestrelweb 服务器:

1. 现在我们可以看到我们的应用在http://localhost:5000启动:

1. 让我们输入Ctrl+C关闭 Kestrel web 服务器。
2. 让我们看看所有可用的子生成器集成到我们刚刚创建的当前生成器中:

yo aspnet -help

在所有给定的生成器中，我们可以看到 Angular、CoffeeScript、JavaScript、TypeScript 和 CSS 文件。 我们还可以看到 MvcController, MvcViews, Nuget 包，和许多其他:

1. 要使用子生成器将 MVC 控制器添加到项目中，我们键入前面看到的命令之一，对应于创建 MVC 控制器，这要归功于yo aspnet:MvcController命令，后面是我们想要的 MVC 控制器名称:

yo aspnet:MvcController ProductController

正如我们所看到的，一个名为ProductController的新的 MVC 控制器刚刚被添加到Controller文件夹中，不需要使用cd命令将其放入特定的文件夹中:

To see all the available options for a subgenerator, we can type the command line that corresponds to the subgenerator, followed by --help.

1. 要使用子生成器将 MVC 视图添加到项目中，我们需要使用另一个子生成器创建一个 MVC 视图，输入yo aspnet:MvcView，然后输入视图的名称(我们知道视图名称必须与 ASP 中的控制器相同)。 在用cd Views命令将其放置到Views文件夹之后。
2. 让我们创建特定的Views子文件夹，对应于还不存在的控制器:

mkdir Product

1. 让我们把它放到我们刚刚创建的文件夹中:

cd Product

1. 现在我们使用MvcView子生成器创建一个名为Index的视图:

yo aspnet:MvcView Index

视图刚刚创建在Product文件夹中。

1. 让我们给这个视图添加一些 HTML 代码:

1. 现在让我们添加一个链接到Layout.cshtml页面，以访问我们刚刚创建的视图:

1. 现在我们保存这个文件，并回到应用的根目录，重新运行 web 服务器并刷新网站主页:

cd ../..

dnx web

1. 让我们点击这个链接来查看由 Yeoman 子生成器创建的新生成的视图。

我们可以看到名为Product的新链接被列为菜单中的第二项:

它是如何工作的…

Yeoman 是开源的，跨平台的，允许我们在开发项目时提高生产力和效率。 许多 Yeoman 生成器(http://yeoman.io/generators/)已经存在于几乎所有的服务器端和客户端框架中，如 AngularJS, ReactJS, Ionic, Polymer, Bootstrap, CakePHP, ASP.NET 5,ASP.NET WEB API，以及其他许多。

Yeoman 是 Node.js 世界的一部分，在这里我们使用 Node 模块、通过 npm 或 Bower 的包管理器以及任务运行器，比如 Grunt 或 Gulp。

注意:其他 Visual Studio 版本已经使用了它们自己的脚手架项目系统，并且可以通过选择 Tools | Extensions and Updates | Online 并在显示的列表中选择一个项目模板来安装许多模板项目。

使用 JSPM

在这个食谱中，我们将使用 ASP 创建一个简单的网页.NET 用于服务器端代码，Node.js 用于 web 工具，但这一次我们不会使用 Bower 作为客户端库的包管理器，而是使用 JSPM。

准备

我们将使用 Visual Studio 2015 Community Edition 作为 ide——尽管我们可以使用任何文本编辑器和 Node.js 作为开发的客户端部分。 在安装 Visual Studio 2015 社区版时，我们知道 Node.js 和 npm 也安装了。

怎么做……

1. 让我们从https://git-scm.com/安装 Git。
2. 从 Windows 命令提示符中选择Use Git。
3. 让我们创建一个 ASP.NET 空应用:
4. 我们通过控制台/命令提示符安装 JSPM，输入以下命令:

npm install jspm -g

-g allows us install this module globally, which means we can open a Command Prompt from anywhere and typing jspm will be recognized and usable.

1. 为了配置 JSPM，让我们打开一个命令提示窗口，并使用cd命令将我们放在项目目录中。
2. 现在让我们输入以下内容:

jspm init

1. 现在我们要回答一系列问题。

只有当package.json不存在时，才会问以下问题:

Package.json file does not exist, create it? [yes]

与 Bower 一样，JSPM 配置和客户端依赖项列表将存储在package.json中。 按Enter将为以下所有问题选择默认答案(yes)。 Apackage.json将在应用的根目录下创建:

Would you like jspm to prefix the jspm package.json properties under jspm?[yes]
Enter server baseURL (public folder path)
The answer to this question is ./wwwroot.
Enter jspm packages folder [wwwrootjspm_packages]
Enter config file path [wwwrootconfig.js]

我们通过按Enter来接受默认值。 使用 JSPM，我们需要一个 JavaScript 文件作为我们的应用在运行时需要引用的.config文件:

Configuration file wwwrootconfig.js doesn't exist, create it? [yes]
Enter client baseURL (public folder URL) [/]
Do you wish to use a transpiler? [yes]
Which ES6 transpiler would you like to use, Babel, Typescript, or Traceur? [babel]

1. 通过按Enter，我们接受默认值Babel。 现在我们可以看到项目中所有生成的文件:

1. 创建三个名为index.html、app.js和appAction.js的文件:

1. 让我们在这些文件中添加代码:

1. 我们创建一个欢迎函数来导出:

现在我们将在app.js中使用appMessage.js中的欢迎函数。 import 关键字将使用一个 JavaScript 函数或对象作为模块，并且像这样，依赖将由一个特定的框架system.js管理:system.js，一个通用的模块加载器。 这给了我们一个 API 和一个运行时来为浏览器加载和编译 JavaScript 代码:

1. 我们从system.js导入app.js，它将管理 JavaScript 依赖，在浏览器 JavaScript 引擎使用的 ECMAScript 版本中编译代码。 system.js也将作为模块加载app.js。 这将允许在这些文件中编写的 ECMAScript 代码在任何浏览器中工作。

我们可以看到代码在index.html上工作:

它是如何工作的…

JSPM(http://jspm.io/)是一个 JavaScript 文件的包管理器，它使用了 SystemJS 通用模块加载器。 它还可以以任何模块格式加载 JavaScript 代码，如 AMD、CommonJS 和 ES6。 JSPM 另一个有趣的特性是，它可以实时地将兼容 JavaScript ECMAScript 6 的代码编译为兼容 JavaScript ECMAScript 5 的代码。 这样，我们的 JavaScript 甚至可以在不兼容 ECMAScript 5 的旧浏览器上工作。 为此，JSPM 将使用 Traceur(https://github.com/google/traceur-compiler/wiki/Getting-Started)、Babel(https://babeljs.io/)或 TypeScript，它们都是 tracer ECMAScript 编译器。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/31750.html