web-dev-qa-db-fra.com

Comment puis-je ajouter Font Awesome à mon projet Aurelia en utilisant npm?

J'ai suivi le tutoriel Contact Manager et je voudrais ajouter Font Awesome au projet. Voici ce que j'ai fait jusqu'à présent:

  • npm install Font-Awesome --save
  • Ajout de ce qui suit à aurelia.jsondans le tableau de dépendances du vendor-bundle.js:


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

Mais lors de l'exécution au run --watch J'obtiens l'erreur:

erreur C:\Users\node_modules\font-awesome.js

Pourquoi recherche-t-il le fichier . Js ?

javascriptfont-awesomeaureliaaurelia-framework
30
MaYaN

N'ajoutez pas de ressources géniales à aurelia.json - vous auriez également besoin de fichiers de polices, qui ne sont pas traités par Aurelia. Au lieu de cela, procédez comme suit.

Tout d'abord, si vous avez déjà ajouté quelque chose pour font-awesome à votre aurelia.json fichier, supprimez-le à nouveau.

Ajouter un nouveau fichier prepare-font-awesome.js dans le dossier \aurelia_project\tasks et insérez le code ci-dessous. Il copie les fichiers de ressources impressionnants dans le dossier de sortie (comme configuré aurelia.json fichier de configuration; par exemple. 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);
}

Ouvrez le build.js fichier dans le \aurelia_project\tasks dossier et insérez les deux lignes suivantes; cela importera la nouvelle fonction et l'exécutera:

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

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

Enfin, dans le <head> section de votre index.html fichier, ajoutez simplement la ligne suivante:

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

C'est tout; vous pouvez maintenant utiliser des icônes géniales dans tous les modules d'affichage Aurelia (fichiers html).

Notez que cela fonctionne pour toute bibliothèque tierce complexe qui nécessite des ressources que vous devez inclure manuellement.

53
JayDi

Méthode de paramétrage par défaut simple

Voici les 4 étapes simples que j'utilise pour intégrer Font-Awesome à un projet Aurelia qui utilise la CLI.

1) npm install font-awesome --save

2) Ajoutez copyFiles à la construction de aurelia.json

"build": {
    "copyFiles": {
      "node_modules/font-awesome/fonts/*": "/fonts/"
    },

3) Ajouter le regroupement au tableau des dépendances de aurelia.json

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

4) inclure l'importation du fichier CSS (le mien vit dans l'app.html)

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

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

Alternative

Spécification d'un emplacement de police personnalisé

Comme je servais mes fichiers à partir d'un autre emplacement, j'avais besoin de pouvoir modifier l'emplacement de police configuré. En tant que tel, voici les étapes à suivre si vous devez faire de même et spécifier où les polices sont stockées. J'utilise .less

1, 2) Comme ci-dessus.

3) Au lieu d'ajouter au regroupement, vous devez référencer le fichier moins impressionnant dans votre propre fichier moins (le mien s'appelle site.less), puis définissez le @fa-font-path à votre emplacement personnalisé.

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

4) Il n'y a pas de 4, avec cette méthode tant que vous avez votre propre équivalent compilé site.css fichier référencé déjà (avec l'importation) vous n'avez pas besoin d'ajouter autre chose.

12
4imble

Ne répondant pas réellement à votre question sur la façon d'intégrer Font Awesome dans votre application à l'aide de NPM , mais il existe un autre moyen propre de l'obtenir dans votre application : utilisation du CDN.

Comme mentionné dans d'autres réponses, Aurlia ne prend actuellement pas en charge le regroupement de ressources autres que js, css et html prêtes à l'emploi à l'aide de la CLI. Il y a beaucoup de discussions sur ce sujet, et il existe plusieurs solutions de contournement, principalement hacky, comme certains suggérées ici.

Rob Eisenberg dit qu'il prévoit de l'intégrer correctement dans la CLI Aurelia, mais il considère que cette priorité est faible car il existe une solution simple. Pour le citer:

Bien sûr, il y a intérêt à y remédier. Cependant, sa priorité est inférieure à celle d'autres éléments de la liste pour la CLI, en partie parce qu'une simple balise de lien résoudra le problème et est beaucoup plus facile que le travail que nous aurions à faire pour résoudre ce problème dans la CLI.

Source: https://github.com/aurelia/cli/issues/248#issuecomment-254254995

  1. Obtenez votre lien CDN unique par la poste ici: http://fontawesome.io/get-started/
  2. Inclure ce lien dans la tête de votre fichier html d'index
  3. N'oubliez pas de supprimer tout ce que vous avez peut-être déjà ajouté pour essayer de le faire fonctionner: le package npm (et sa référence dans votre package.json), la référence dans votre fichier aurelia.json, toutes les tâches personnalisées que vous pourriez avoir créées, tout <require> Mots clés,...
8
Vincent Sels

Drôle, j'essayais de faire fonctionner la même chose ce matin. C'est tout ce que j'avais à faire dans mes dépendances aurelia.json pour que cela fonctionne:

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

Puis dans mon html j'avais:

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

l'importation automatique de CSS/polices est désormais prise en charge.

{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome/css",
    "main": "font-awesome.css"
}

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

Commander ce "problème" https://github.com/aurelia/cli/issues/249
Joyeux codage

ÉDITER

J'ai réalisé/lu les commentaires, cela ne copie pas les fichiers de police. Voici un script de construction mis à jour (es6) qui copiera toutes les ressources et ajoutera le dossier à git ignore. Si vous voulez la version TypeScript, cochez ici
https://github.com/aurelia/cli/issues/248#issuecomment-253837412

./ 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();
}
6
James Harrington

Je crois que bundles.dependencies section est pour référencer les bibliothèques JS.

Dans votre cas, un peu de travail supplémentaire sera nécessaire. Selon Aurelia CLI docs, vous pouvez également créer vos propres générateurs, ce qui est très pratique pour nous.

Ajoutez de nouveaux chemins à aurelia.json:

"paths": {
    ...
    "fa": "node_modules\\font-awesome",
    "faCssOutput": "src",
    "faFontsOutput": "fonts"
    ...
}

Créer une tâche pour le regroupement css ... au generate task fa-css

Fichier de tâches modifié: 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());
};

... et un autre pour copier des fichiers de polices: au generate task fa-fonts

Fichier de tâches modifié: 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));
}

Ajoutez ces nouvelles tâches ci-dessus au processus de génération dans aurelia_project\tasks\build.js|ts:

export default gulp.series(
    readProjectConfiguration,
    gulp.parallel(
        transpile,
        processMarkup,
        processCSS,
        // custom tasks
        faCss,
        faFonts
    ),
    writeBundles
);

Après avoir effectué ces étapes, au build devrait intégrer font-awesome.min.css dans scripts/app-bundle.js et copiez les fichiers de polices nécessaires dans le dossier ./fonts.

La dernière chose à faire est d'exiger font-awesome dans notre html.

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

Vous n'avez pas besoin de plus:

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

Voir la section Configuration pour copier des fichiers

j'espère vous aider.

3
Sebastiao Marcos

Pour ceux qui souhaitent utiliser la version sass de font-awesome

1) Installez font-awesome

npm install font-awesome --save

2) Copiez les polices de font-awesome dans le répertoire racine de votre projet

cp -r node_modules/font-awesome/fonts .

3) Inclure le répertoire sass font-awesome dans la tâche du processeur 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) Importez une police géniale dans votre application scss

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

5) Exigez le scss de votre application dans votre html

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