Как я могу добавить Font Awesome в свой проект Aurelia, используя npm?

Я следовал руководству 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\font-awesome.js

Почему он ищет файл .js?

Источник

8 ответов

Решение

Не добавляйте удивительные шрифты в aurelia.json - вам также понадобятся файлы шрифтов, которые Aurelia не обрабатывает. Вместо этого сделайте следующие шаги.

Во-первых, если вы уже добавили что-нибудь для font-awesome уже в свой aurelia.json файл, удалите его снова.

Добавить новый файл prepare-font-awesome.js в папке \aurelia_project\tasks и вставьте следующий код. Он копирует удивительные шрифты файлы ресурсов в выходную папку (как настроено 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-файлы).

Обратите внимание, что это работает для любой сложной сторонней библиотеки, которая требует ресурсов, которые вы должны включить вручную.

Источник

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

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

1) npm установить шрифт-офигенно --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) Вместо добавления в пакет, вам нужно сослаться на файл font-awesome less внутри вашего собственного файла less (мой называется site.less), а затем установить @fa-font-path в ваше собственное местоположение.

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

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

Источник

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

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

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

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

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

Источник: https://github.com/aurelia/cli/issues/248

  1. Получите вашу уникальную ссылку CDN по почте здесь: http://fontawesome.io/get-started/
  2. Включите эту ссылку в заголовке вашего HTML-файла индекса
  3. Не забудьте удалить все, что вы, возможно, уже добавили, чтобы попытаться заставить его работать: пакет npm (и его ссылку в вашем package.json), ссылку в вашем файле aurelia.json, любые пользовательские задачи, которые вы могли создать, любой <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. Если вы хотите версию машинописного текста, проверьте здесь
https://github.com/aurelia/cli/issues/248

./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();
}
Источник

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

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

Последнее, что нужно сделать, это потребовать использования шрифта в нашем html.

<require from ="./font-awesome.min.css"></require>
Источник

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

в 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/"
}

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

я надеюсь помочь тебе

Источник

Для тех, кто хочет использовать sass версию font-awesome

1) Установить шрифт-офигенный

npm install font-awesome --save

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

cp -r node_modules/font-awesome/fonts .

3) Включите каталог sass font-awesome в задачу процессора 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) Требуйте, чтобы ваше приложение использовалось в html

# src/app.html
<template>
  <require from="./app.css"></require>
</template>
Источник
Другие вопросы по тегам