Подтвердить что ты не робот

Как добавить шрифт 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\шрифт-awesome.js

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Добавить новый файл 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">

Это все; теперь вы можете использовать шрифтовые значки в любых модулях View Aurelia (html файлы).

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

Ответ 2

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

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

Роб Эйзенберг (Rob Eisenberg) говорит, что планирует его правильно интегрировать в CLI Aurelia, но он считает его низким приоритетом, потому что существует простой способ обхода проблемы. Процитировать его:

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

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

  • Получите вашу уникальную ссылку CDN, которую можно отправить здесь: http://fontawesome.io/get-started/
  • Включите эту ссылку в голову вашего индексного html файла
  • Не забудьте удалить все, что вы, возможно, уже добавили, чтобы попытаться заставить его работать: пакет npm (и его ссылка в вашем package.json), ссылка в вашем файле aurelia.json, любые пользовательские задачи, которые вы могли бы создали теги <require>,...

Ответ 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>

Ответ 4

теперь импортируется css/fonts automagicly.

{
    "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
Счастливая трава

ИЗМЕНИТЬ

Я понял/прочитал комментарии, это не копирует файлы шрифтов. Вот обновленная сборка script (es6), которая скопирует все ресурсы и добавит папку в git ignore. Если вы хотите проверить версию typescript здесь
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();
}

Ответ 5

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

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

1) npm install font-awesome --save

2) добавить copyFiles для сборки aurelia.json

"build": {
    "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/"
    },

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>

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

Alternative

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

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

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

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

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

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

Ответ 6

Я считаю, что раздел 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>

Ответ 7

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

1) Установите font-awesome

npm install font-awesome --save

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

cp -r node_modules/font-awesome/fonts .

3) Включите шрифт-awesome sass directory в задачу процессора 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>

Ответ 8

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

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

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

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