простой метод настройки по умолчанию

вот 4 простых шага, которые я использую, чтобы ввести шрифт-Awesome в проект Aurelia, который использует CLI.

1) npm установить шрифт-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 (мой живет в приложение.html)

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

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

альтернатива

указание пользовательского расположения шрифта

поскольку я обслуживал свои файлы из другого места, мне нужно было настроить местоположение шрифта. Как таковые, ниже приведены шаги, если вам нужно сделать то же самое и указать, где хранятся шрифты. Я употребляю .меньше

1, 2), Как указано выше.

3) Вместо того, чтобы добавлять в пакет, вам нужно ссылаться на шрифт-удивительный меньше файла в вашем собственном меньше файла (мой называется сайт.меньше), а затем выберите @fa-font-path для пользовательского местоположения.

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

4) нет 4, с этим методом, пока у вас есть свой собственный скомпилированный эквивалент site.css файл, на который уже ссылаются (с импортом), вам не нужно ничего добавлять.

фактически не отвечая на ваш вопрос о том, как интегрировать шрифт Awesome в ваше приложение использование NPM, но есть альтернативный, чистый способ получить его в вашем приложении: с помощью CDN.

Как упоминалось в других ответах, Aurlia в настоящее время не поддерживает связывание ресурсов, кроме js, css и html из коробки с помощью CLI. Существует много дискуссий по этому вопросу, и есть несколько, в основном хакерских, обходных путей, как некоторые предположили здесь.

Роб Айзенберг говорит, что он планирует правильно интегрировать его в Aurelia CLI, но он считает это низким приоритетом, потому что есть простой обходной путь. Процитирую его:

конечно, есть интерес в решении этой проблемы. Тем не менее, это более низкий приоритет, чем другие вещи в списке для CLI, отчасти потому, что простой тег ссылки исправит проблему и намного проще, чем работа, которую мы должны были бы сделать, чтобы решить это внутри CLI.

источник:https://github.com/aurelia/cli/issues/248#issuecomment-254254995

1. получите вашу уникальную ссылку CDN по почте здесь:http://fontawesome.io/get-started/
2. включите эту ссылку в начало вашего HTML-файла индекса
3. не забудьте удалить все, что вы, возможно, уже добавили, чтобы попытаться заставить его работать: пакет npm (и его ссылку в вашем пакете.в JSON), ссылка в твоя Аурелия.JSON-файл, любые пользовательские задачи, которые вы могли создать, любые <require> теги,...

забавно, что я пытался заставить то же самое работать сегодня утром. Это все, что мне нужно было сделать в моей Аурелии.зависимости 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>

импорт css / шрифтов автоматически теперь поддерживается.

{
    "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. Если вы хотите проверить версию typescript здесь
https://github.com/aurelia/cli/issues/248#issuecomment-253837412

./ aurelia_project / задачи / сборка.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();
}

я считаю, что bundles.dependencies раздел предназначен для ссылки на библиотеки JS.

в вашем случае потребуется немного дополнительной работы. Согласно Аурелия командной строки docs, вы можете создать ваши собственные генераторы также, который приходит в сподручное для нас.

добавить несколько новых путей к 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 в Скрипты / app-bundle.js и скопируйте необходимые файлы шрифтов ./папка fonts.

последнее, что нужно сделать, это потребовать font-awesome в нашем html.

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

вам не нужно больше этого:

в Аурелии.в 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/"
}

см. раздел настройка копирования файлов

Я надеюсь помочь вам.

для тех, кто хочет использовать версию Sass шрифта-awesome

1) установить шрифт-awesome

npm install font-awesome --save

2) скопируйте шрифт-шрифты awesome в корневой каталог проекта

cp -r node_modules/font-awesome/fonts .

3) Включите шрифт-удивительный каталог sass в задаче процессора aurelia css

# 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

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

5) требуется ваше приложение scss в вашем html

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