Aurelia CLI字体很棒

Question

我尝试了几种不同的解决方案，但没有一种解决方案适合我。

我正在使用.NET Core，最新的Aurelia / Aurelia CLI和使用npm install font-awesome --save安装的Font-Awesome。

解决方案1：

新文件：文件夹\ aurelia_project \ tasks中的prepare-font-awesome.js

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
);

在html中包含font-awesome

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

错误：

GET http://localhost:9000/scripts/css/font-awesome.min.css

解决方案2：

更新了aurelia.json

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

在root / font-awesome / fonts中添加了字体文件

在html中包含font-awesome

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

错误：没有错误，但未显示图标

解决方案3：

更新了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();
}

更新了aurelia.json

{
    "name": "font-awesome",
    "main":"",
    "path": "../node_modules/font-awesome",
    "resources": [
        "css/font-awesome.css",
        "/fonts/fontawesome-webfont.woff2",
        "/fonts/FontAwesome.otf",
        "/fonts/fontawesome-webfont.eot",
        "/fonts/fontawesome-webfont.svg",
        "/fonts/fontawesome-webfont.ttf"
    ]
}

在html中包含font-awesome

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

错误：

得到：http://localhost:9000/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0（与woff和ttf相同）

这很奇怪，因为文件被复制，网址是正确的..

文件夹结构：

测试了几个不同的来源

我错过了什么？

我更喜欢一个较少的实现，所以我可以在我的master less文件中导入Font-Awesome。

Answer 1

根据讨论，由于您在wwwroot文件夹中托管项目，因此您必须从那里获取文件的“获取”。 所以，如果你将你的字体文件移动到wwwroot/fonts/font-name.woff（或者某个地方），你应该是金色的。

Answer 2

如果您使用最新的（2019年）aurelia cli生成基于webpack的项目，那么添加fontawesome或bootstrap非常简单。

第1步：安装fontawesome

检查official docs here。只是为了完整性，这里是免费版的npm或纱线方式

//with npm
npm install --save-dev @fortawesome/fontawesome-free

// yarn
yarn add --dev @fortawesome/fontawesome-free

第2步：导入字体

在你的main.js或main.ts或app.js或app.ts中，所有这些都能很好地工作，哪个更好？问谷歌。

import '@fortawesome/fontawesome-free/css/all.min.css';

更简单的方法是将CDN版本添加到index.esj或index.html文件的头部

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css" />

所有上述工作同样出色，对于公共应用程序，我更喜欢CDN解决方案，因为浏览器缓存。