Bower 即将消失。 NuGet 现在专注于 .NET 包,因此获得 font-awesome 的最佳选择是通过 NPM。
1.下载NPM
确保您安装了最新的nodejs。导航到https://nodejs.org/en/ 并下载 LTS 版本。
要检查您机器上安装的node 和npm 的版本:
- 在 Visual Studio 中右键单击您的项目
- 选择“打开命令行”
- 选择“默认 (Cmd)”(或您要使用的任何命令提示符)
- 运行命令
node -v 和npm -v
2。加package.json
您需要将 npm 配置文件添加到您的项目中。这个配置文件列出了你所有的包,并被 npm 用来在需要时恢复包。
添加 npm 配置文件:
- 在 Visual Studio 中右键单击您的项目
- 选择“添加”->“新项目”
- 选择左侧的“ASP.NET Core”,在右上角的搜索栏中搜索“npm”
- 点击“添加”
3。安装 font-awesome(和其他)
打开package.json 并在devDependencies 下输入"font-awesome":,它应该会自动为您提供可供选择的版本列表。选择你喜欢的版本。
通过保存这个package.json 文件,npm 会将列出的库下载到您项目下隐藏的node_modules 文件夹中。
4。将文件复制到 wwwroot
在 ASP.NET Core MVC 应用程序中,如果要使用样式和 javascript 文件等静态内容,除了需要在 Startup.cs 中启用 app.UseStaticFiles(); 外,还需要将文件复制到 wwwroot 文件夹。默认情况下,例如 node_modules 中的内容不可用于您的应用程序。
您当然可以手动将您想要的文件处理到 wwwroot 文件夹中。但是,每当有新版本出现时,您就必须替换文件。
要正确复制文件,我们需要使用 3rd 方工具!
BundlerMinifier 是一个很棒的工具,您可以使用它来捆绑您想要的文件并将它们输出到您想要的目录。它使用类似的配置文件bundleconfig.json:
但此工具不适用于.css 和.js 以外的文件类型。 font-awesome 字体文件夹的相对 URL 也存在问题,因为 font-awesome 样式使用 url();(设置 "adjustRelativePaths": false 并不总是有效)。
5。创建 Gulp 任务
为了正确将 font-awesome 文件和字体移动到 wwwroot 文件夹,我可以使用 gulp 来设置我可以在构建之前、构建之后等运行的任务:
5.1。安装gulp(和rimraf,unix命令rm -rf)
转到package.json 并在依赖项列表中键入gup 和rimraf。保存文件。
5.2。将gulpfile.js 添加到您的项目并定义任务
我基本上需要创建一个任务来将 font-awesome 移动到 wwwroot/libs 文件夹,并创建另一个任务来做相反的清理工作。我省略了与 font-awesome 无关的其他任务。
Gulp +v4.0 的 5.2.1 更新:
gulp 来自 gulp v4.0 使用 gulp.series() 组合多个任务
所以如果你使用 Gulp +v4.0 你应该更新你的代码如下:
gulp.task('default', gulp.series(
'copy:font-awsome'
));
gulp.task('clean', gulp.series(
'clean:font-awesome'
));
5.3 运行任务
设置gulpfile.js 后,您应该能够看到“Task Runner Explorer”中列出的任务。如果 Visual Studio 中没有该窗口,请转到“查看”->“其他窗口”。
您可以通过右键单击任何任务并点击“运行”来手动运行它。或者,您可以在构建前、构建后、清理或项目打开时自动运行它。
设置绑定后,将在gulpfile.js 中添加一个标头:
现在保存gulpfile.js 文件并构建您的项目。您的字体很棒的文件和字体应该会自动移动到 wwwroot 并准备好使用。