修改

Question

我一直在关注Contact Manager教程，并希望将 Font Awesome 添加到项目中。以下是我到目前为止所做的事情：

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

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

但是在运行au run --watch时出现错误：

错误 C：\ Users \用户node_modules \字体awesome.js

为什么要查找 .js 文件？

Answer 1

不要为aurelia.json添加字体真棒资源 - 你也需要字体文件，Aurelia不会处理。相反，请执行以下步骤。

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

在文件夹prepare-font-awesome.js中添加新文件\aurelia_project\tasks并插入以下代码。它将font-awesome资源文件复制到输出文件夹（配置为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);
}

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

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

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

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

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

这就是全部;现在你可以在任何Aurelia视图模块（html文件）中使用font-awesome图标。

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

Answer 2

简单的默认设置方法

以下是我用来将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）您需要在自己较少的文件中引用较少的字体（我的名为site.less），然后将@fa-font-path设置为您的自定义位置，而不是添加到捆绑中。 / p>

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

4）没有4，只要你有自己编译的等效site.css文件（使用导入），你就不需要添加任何其他东西。

Answer 3

有趣的是，我试图在今天早上做同样的工作。这是我在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 4

实际上没有回答你如何在你的应用程序中使用NPM 集成Font Awesome的问题，但是在你的应用程序中有另一种干净的方式来使用它：使用CDN。

正如其他答案所述，Aurlia目前不支持使用CLI捆绑除js，css和html以外的资源。关于这个主题有很多讨论，有几个，大多是hacky，解决方法，就像这里建议的那样。

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

当然有兴趣解决这个问题。但是，它的优先级低于CLI列表中的其他内容，部分原因是简单的链接标记可以解决问题，并且比在CLI中解决此问题的工作要容易得多。

来源：https://github.com/aurelia/cli/issues/248#issuecomment-254254995

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

Answer 5

现在支持自动导入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
快乐编码

修改

我意识到/阅读了这些不复制字体文件的评论。这是一个更新的构建脚本（es6），它将复制任何资源并将文件夹添加到git ignore。如果你想在这里检查打字稿版本
https://github.com/aurelia/cli/issues/248#issuecomment-253837412

<强> ./ aurelia_project /任务/ 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 6

我相信bundles.dependencies部分用于引用JS库。

在您的情况下，还需要做一些额外的工作。根据{{3}}文档，您也可以创建自己的生成器，这对我们来说非常方便。

向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 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

对于那些希望使用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）在你的应用scss中导入font-awesome

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

5）在你的HTML

中要求你的应用程序scss

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

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

8 个答案:

简单的默认设置方法

替代

指定自定义字体位置

修改