如何使用 npm 将 Font Awesome 添加到我的 Aurelia 项目中？

Question

我一直在关注 Contact Manager 教程，并想将 Font Awesome 添加到项目中。这是我到目前为止所做的：

npm install Font-Awesome --save
在 vendor-bundle.js 的 dependencies 数组下的 aurelia.json 添加了以下内容：

...
{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome",
    "resources": [
      "css/font-awesome.min.css"
    ]
},
...

但是当运行 au run --watch 我得到错误：

error C:\Users\node_modules\font-awesome.js

为什么要查找 .js 文件？

Answer 1

我认为 bundles.dependencies 部分用于引用 JS 库。

对于您的情况，还需要做一些额外的工作。根据 Aurelia CLI 文档，您也可以创建自己的生成器，这对我们很有用。

向 aurelia.json 添加一些新路径：

"paths": {
    ...
    "fa": "node_modules\font-awesome",
    "faCssOutput": "src",
    "faFontsOutput": "fonts"
    ...
}

为 css 捆绑创建任务... au generate task fa-css

修改后的任务文件：aurelia_project\tasks\fa-css.js|ts

import * as gulp from 'gulp';
import * as changedInPlace from 'gulp-changed-in-place';
import * as project from '../aurelia.json';
import {build} from 'aurelia-cli';

export default function faCss() {
    return gulp.src(`${project.paths.fa}\css\*.min.css`)
        .pipe(changedInPlace({firstPass:true}))
        /* this ensures that our 'require-from' path  
           will be simply './font-awesome.min.css' */
        .pipe(gulp.dest(project.paths.faCssOutput))
        .pipe(gulp.src(`${project.paths.faCssOutput}\font-awesome.min.css`))
        .pipe(build.bundle());
};

...还有一个用于复制字体文件： au generate task fa-fonts

修改后的任务文件：aurelia_project\tasks\fa-fonts.js|ts

import * as gulp from 'gulp';
import * as project from '../aurelia.json';

export default function faFonts() {
    return gulp.src(`${project.paths.fa}\fonts\*`)
        .pipe(gulp.dest(project.paths.faFontsOutput));
}

将上述这些新任务添加到 aurelia_project\tasks\build.js|ts 中的构建过程中：

export default gulp.series(
    readProjectConfiguration,
    gulp.parallel(
        transpile,
        processMarkup,
        processCSS,
        // custom tasks
        faCss,
        faFonts
    ),
    writeBundles
);

完成这些步骤后，au build 应将 font-awesome.min.css 嵌入 scripts/app-bundle.js 并将必要的字体文件复制到 ./fonts 文件夹。

最后要做的是在我们的 html.

中要求 font-awesome

<require from ="./font-awesome.min.css"></require>

Answer 2

有趣的是，今天早上我试图让同样的东西工作。这就是我在我的 aurelia.json 依赖项中要做的全部工作：

      {
        "name": "font-awesome",
        "path": "../node_modules/font-awesome/",
        "main": "",
        "resources": [
          "css/font-awesome.min.css"
        ]
      },

然后在我的 html 我有：

<require from="font-awesome/css/font-awesome.min.css"></require>

Answer 3

不要将超棒的字体资源添加到 aurelia.json - 您还需要字体文件，Aurelia 不会处理这些文件。相反，请执行以下步骤。

首先，如果您已经在 aurelia.json 文件中添加了 font-awesome 的任何内容，请再次将其删除。

在文件夹 \aurelia_project\tasks 中添加新文件 prepare-font-awesome.js 并插入以下代码。它将字体超棒的资源文件复制到输出文件夹（如配置的 aurelia.json 配置文件；例如 scripts）：

import gulp from 'gulp';
import merge from 'merge-stream';
import changedInPlace from 'gulp-changed-in-place';
import project from '../aurelia.json';

export default function prepareFontAwesome() {
  const source = 'node_modules/font-awesome';

  const taskCss = gulp.src(`${source}/css/font-awesome.min.css`)
    .pipe(changedInPlace({ firstPass: true }))
    .pipe(gulp.dest(`${project.platform.output}/css`));

  const taskFonts = gulp.src(`${source}/fonts/*`)
    .pipe(changedInPlace({ firstPass: true }))
    .pipe(gulp.dest(`${project.platform.output}/fonts`));

  return merge(taskCss, taskFonts);
}

打开\aurelia_project\tasks文件夹中的build.js文件，插入以下两行；这将导入新函数并执行它：

import prepareFontAwesome from './prepare-font-awesome'; // Our custom task

export default gulp.series(
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS,
    prepareFontAwesome // Our custom task
  ),
  writeBundles
);

最后，在 index.html 文件的 <head> 部分，添加以下行：

<link rel="stylesheet" href="scripts/css/font-awesome.min.css">

就这些；现在您可以在任何 Aurelia 视图模块（html 文件）中使用超棒的字体图标。

请注意，这适用于任何需要您必须手动包含的资源的复杂第三方库。

Answer 4

实际上并没有回答您关于如何在您的应用程序中集成 Font Awesome 的问题使用 NPM，但是有一种替代的、干净的方法可以在您的应用程序中获取它：使用CDN.

如其他答案中所述，Aurlia 目前不支持使用 CLI 开箱即用地捆绑 js、css 和 html 以外的资源。有很多关于这个主题的讨论，并且有几种解决方法，主要是 hacky，就像这里建议的一些。

Rob Eisenberg 说他计划将其正确集成到 Aurelia CLI 中，但他认为它的优先级较低，因为有一个简单的解决方法。引用他的话：

Of course there is interest in addressing this. However, it's lower priority than other things on the list for the CLI, in part because a simple link tag will fix the problem and is much easier than the work we would have to do to solve this inside the CLI.

Source: https://github.com/aurelia/cli/issues/248#issuecomment-254254995

将您的唯一 CDN link 邮寄到此处：http://fontawesome.io/get-started/
将此 link 包含在索引 html 文件的头部
不要忘记删除您可能已经添加的所有内容以尝试使其正常工作：npm 包（及其在您的 package.json 中的引用），您的 aurelia.json 文件中的引用，您可能创建的任何自定义任务，任何 <require> 标签，...

Answer 5

对于希望使用 sass 版 font-awesome

的用户

1) 安装 font-awesome

npm install font-awesome --save

2) 复制font-awesome的字体到你的项目根目录

cp -r node_modules/font-awesome/fonts .

3) 在 aurelia css 处理器任务

中包含 font-awesome sass 目录

# aurelia_project/tasks/process-css.js
export default function processCSS() {
  return gulp.src(project.cssProcessor.source)
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [
        'node_modules/font-awesome/scss'
      ]
    }).on('error', sass.logError))
    .pipe(build.bundle());
};

4) 在您的应用中导入 font-awesomecss

# src/app.scss    
@import 'font-awesome';

5) 在您的 html

中需要您的应用 css

# src/app.html
<template>
  <require from="./app.css"></require>
</template>

Answer 6

现在支持自动导入 css/fonts。

{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome/css",
    "main": "font-awesome.css"
}

<require from="font-awesome.css"></require>

检查这个“问题”https://github.com/aurelia/cli/issues/249
编码愉快

编辑

我realized/read评论这个不复制字体文件。这是一个更新的构建脚本 (es6)，它将复制任何资源并将文件夹添加到 git 忽略。如果你想要打字稿版本，请在此处检查
https://github.com/aurelia/cli/issues/248#issuecomment-253837412

./aurelia_project/tasks/build.js

import gulp from 'gulp';
import transpile from './transpile';
import processMarkup from './process-markup';
import processCSS from './process-css';
import { build } from 'aurelia-cli';
import project from '../aurelia.json';
import fs from 'fs';
import readline from 'readline';
import os from 'os';

export default gulp.series(
  copyAdditionalResources,
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS
  ),
  writeBundles
);

function copyAdditionalResources(done){
  readGitIgnore();
  done();
}

function readGitIgnore() {
  let lineReader = readline.createInterface({
    input: fs.createReadStream('./.gitignore')
  });
  let gitignore = [];

  lineReader.on('line', (line) => {
    gitignore.push(line);
  });

  lineReader.on('close', (err) => {
    copyFiles(gitignore);
  })
}

function copyFiles(gitignore) {
  let stream,
    bundle = project.build.bundles.find(function (bundle) {
      return bundle.name === "vendor-bundle.js";
    });

  // iterate over all dependencies specified in aurelia.json
  for (let i = 0; i < bundle.dependencies.length; i++) {
    let dependency = bundle.dependencies[i];
    let collectedResources = [];
    if (dependency.path && dependency.resources) {
      // run over resources array of each dependency
      for (let n = 0; n < dependency.resources.length; n++) {
        let resource = dependency.resources[n];
        let ext = resource.substr(resource.lastIndexOf('.') + 1);
        // only copy resources that are not managed by aurelia-cli
        if (ext !== 'js' && ext != 'css' && ext != 'html' && ext !== 'less' && ext != 'scss') {
          collectedResources.push(resource);
          dependency.resources.splice(n, 1);
          n--;
        }
      }
      if (collectedResources.length) {
        if (gitignore.indexOf(dependency.name)< 0) {
          console.log('Adding line to .gitignore:', dependency.name);
          fs.appendFile('./.gitignore', os.EOL + dependency.name, (err) => { if (err) { console.log(err) } });
        }

        for (let m = 0; m < collectedResources.length; m++) {
          let currentResource = collectedResources[m];
          if (currentResource.charAt(0) != '/') {
            currentResource = '/' + currentResource;
          }
          let path = dependency.path.replace("../", "./");
          let sourceFile = path + currentResource;
          let destPath = './' + dependency.name + currentResource.slice(0, currentResource.lastIndexOf('/'));
          console.log('Copying resource', sourceFile, 'to', destPath);
          // copy files
          gulp.src(sourceFile)
            .pipe(gulp.dest(destPath));
        }
      }
    }
  }
}


function readProjectConfiguration() {
  return build.src(project);
}

function writeBundles() {
  return build.dest();
}

Answer 7

你不需要更多这个:

在aurelia.json

"dependencies": [
      "jquery",
      "text",
      {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist/",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "resources": [
          "css/bootstrap.min.css"
        ]
      },
      {
        "name": "font-awesome",
        "path": "../node_modules/font-awesome/css",
        "main": "",
        "resources": [
          "font-awesome.min.css"
        ]
      }
    ]
  }
],
"copyFiles": {
  "node_modules/font-awesome/fonts/fontawesome-webfont.woff": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "fonts/",
  "node_modules/font-awesome/fonts/FontAwesome.otf": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.svg": "fonts/"
}

See section Setup for copying files

希望能帮到你

Answer 8

简单的默认设置方法

这是我用来将 Font-Awesome 引入到使用 CLI 的 Aurelia 项目的 4 个简单步骤。

1) npm install font-awesome --save

2) 将 copyFiles 添加到 aurelia.json

的构建中

"build": {
    "copyFiles": {
      "node_modules/font-awesome/fonts/*": "/fonts/"
    },

3) 将捆绑添加到 aurelia.json

的依赖项数组

"dependencies": [
{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome/css",
    "main": "font-awesome.css"
},

4) 包含 css 文件的导入（我的位于 app.html）

<require from="font-awesome.css"></require>

============================================= ============================

备选

指定自定义字体位置

当我从不同的位置提供我的文件时，我需要能够调整配置的字体位置。因此，如果您需要执行相同的操作并指定字体的存储位置，则需要执行以下步骤。我正在使用 .less

1, 2) 同上。

3) 你需要在自己的 less 文件中引用字体超棒的 less 文件，而不是添加到捆绑包中（我的文件名为 site.less），然后将 @fa-font-path 设置为你的自定义位置。

@import "../node_modules/font-awesome/less/font-awesome.less";
@fa-font-path:   "fonts";

4) 没有 4，使用此方法只要您有自己编译的等效 site.css 文件（通过导入）已被引用，您不需要添加任何其他内容。

如何使用 npm 将 Font Awesome 添加到我的 Aurelia 项目中？

How can I add Font Awesome to my Aurelia project using npm?

javascript

font-awesome

aurelia

编辑

简单的默认设置方法

备选

指定自定义字体位置