javascript - fortawesome - npm install font awesome
¿Cómo puedo agregar Font Awesome a mi proyecto Aurelia usando npm? (8)
He estado siguiendo el tutorial de Contact Manager y me gustaría agregar Font Awesome al proyecto. Esto es lo que he hecho hasta ahora:
-
npm install Font-Awesome --save -
Se agregó lo siguiente a
aurelia.jsonen la matriz de dependencias devendor-bundle.js:
...
{
"name": "font-awesome",
"path": "../node_modules/font-awesome",
"resources": [
"css/font-awesome.min.css"
]
},
...
Pero cuando
au run --watch
me sale el error:
error C: / Users / node_modules / font-awesome.js
¿Por qué está buscando el archivo .js ?
Método de configuración predeterminado simple
Estos son los 4 pasos simples que uso para incorporar Font-Awesome a un proyecto de Aurelia que usa la CLI.
1) npm install font-awesome --save
2) agregue copyFiles a la compilación de aurelia.json
"build": {
"copyFiles": {
"node_modules/font-awesome/fonts/*": "/fonts/"
},
3) agregue la agrupación a la matriz de dependencias de aurelia.json
"dependencies": [
{
"name": "font-awesome",
"path": "../node_modules/font-awesome/css",
"main": "font-awesome.css"
},
4) incluye la importación del archivo css (el mío vive en la aplicación.html)
<require from="font-awesome.css"></require>
================================================== =======================
Alternativa
Especificar una ubicación de fuente personalizada
Como estaba sirviendo mis archivos desde una ubicación diferente, necesitaba poder modificar la ubicación de la fuente configurada. Como tal, a continuación se detallan los pasos necesarios si necesita hacer lo mismo y especificar dónde se almacenan las fuentes. Estoy usando .less
1, 2) Como arriba.
3) En lugar de agregar al paquete, debe hacer referencia al archivo menos fuente-impresionante dentro de su propio archivo menos (el mío se llama site.less) y luego establecer
@fa-font-path
a su ubicación personalizada.
@import "../node_modules/font-awesome/less/font-awesome.less";
@fa-font-path: "fonts";
4) No hay 4, con este método, siempre y cuando tenga su propio archivo
site.css
equivalente compilado al que se
site.css
referencia (con la importación), no necesita agregar nada más.
Creo que la sección
bundles.dependencies
es para hacer referencia a las bibliotecas JS.
En su caso, se necesitará un poco de trabajo adicional. Según los documentos de CLI de Aurelia , también puede crear sus propios generadores, lo cual es útil para nosotros.
Agregue algunas rutas nuevas a
aurelia.json
:
"paths": {
...
"fa": "node_modules//font-awesome",
"faCssOutput": "src",
"faFontsOutput": "fonts"
...
}
Crear una tarea para la agrupación css ...
au generate task fa-css
Archivo de tareas modificado:
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());
};
... y otro para copiar archivos de fuentes:
au generate task fa-fonts
Archivo de tareas modificado:
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));
}
Agregue estas nuevas tareas anteriores al proceso de compilación en
aurelia_project/tasks/build.js|ts
:
export default gulp.series(
readProjectConfiguration,
gulp.parallel(
transpile,
processMarkup,
processCSS,
// custom tasks
faCss,
faFonts
),
writeBundles
);
Después de seguir estos pasos,
au build
debería incrustar
font-awesome.min.css
en scripts / app-bundle.js y copiar los archivos de fuentes necesarios en la carpeta ./fonts.
Lo último que debe hacer es requerir font-awesome dentro de nuestro html.
<require from ="./font-awesome.min.css"></require>
Es curioso que intentara hacer que lo mismo funcionara esta mañana. Esto es todo lo que tenía que hacer en mis dependencias aurelia.json para que funcione:
{
"name": "font-awesome",
"path": "../node_modules/font-awesome/",
"main": "",
"resources": [
"css/font-awesome.min.css"
]
},
Luego en mi html tuve:
<require from="font-awesome/css/font-awesome.min.css"></require>
Importar css / fonts de forma automática ahora es compatible.
{
"name": "font-awesome",
"path": "../node_modules/font-awesome/css",
"main": "font-awesome.css"
}
<require from="font-awesome.css"></require>
Consulte este "Issue"
https://github.com/aurelia/cli/issues/249
Feliz codificación
EDITAR
Me di cuenta / leí los comentarios, esto no copia los archivos de fuentes.
Aquí hay un script de compilación actualizado (es6) que copiará cualquier recurso y agregará la carpeta al git ignore.
Si quieres la versión mecanografiada marca aquí
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();
}
No agregue recursos de fuente asombrosa a aurelia.json: también necesitaría archivos de fuente, que Aurelia no procesa. En su lugar, siga los siguientes pasos.
Primero, si ya agregó algo para font-awesome a su archivo
aurelia.json
, elimínelo nuevamente.
Agregue el nuevo archivo
prepare-font-awesome.js
en la carpeta
/aurelia_project/tasks
e inserte el siguiente código.
Copia archivos de recursos de fuente impresionante en la carpeta de salida (como archivo de configuración
aurelia.json
configurado; por ejemplo,
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);
}
Abra el archivo
build.js
en la
/aurelia_project/tasks
e inserte las siguientes dos líneas;
esto importará la nueva función y la ejecutará:
import prepareFontAwesome from ''./prepare-font-awesome''; // Our custom task
export default gulp.series(
readProjectConfiguration,
gulp.parallel(
transpile,
processMarkup,
processCSS,
prepareFontAwesome // Our custom task
),
writeBundles
);
Finalmente, en la sección
<head>
de su archivo
index.html
, simplemente agregue la siguiente línea:
<link rel="stylesheet" href="scripts/css/font-awesome.min.css">
Eso es todo; ahora puede usar íconos de fuente impresionante en cualquier módulo de vista de Aurelia (archivos html).
Tenga en cuenta que esto funciona para cualquier biblioteca de terceros compleja que requiera recursos que debe incluir manualmente.
No estoy respondiendo realmente a su pregunta de cómo integrar Font Awesome en su aplicación usando NPM , pero hay una forma alternativa y limpia de obtenerlo en su aplicación: usando el CDN.
Como se mencionó en otras respuestas, Aurlia actualmente no admite la agrupación de recursos que no sean js, css y html listos para usar con la CLI. Se discute mucho sobre este tema, y hay varias soluciones, en su mayoría extravagantes, como algunas sugeridas aquí.
Rob Eisenberg dice que planea integrarlo adecuadamente en la CLI de Aurelia, pero considera que tiene baja prioridad porque hay una solución simple. Para citarlo:
Por supuesto, hay interés en abordar esto. Sin embargo, es menos prioritario que otras cosas en la lista para la CLI, en parte porque una simple etiqueta de enlace solucionará el problema y es mucho más fácil que el trabajo que tendríamos que hacer para resolver esto dentro de la CLI.
Fuente: https://github.com/aurelia/cli/issues/248#issuecomment-254254995
- Obtenga su enlace CDN único enviado por correo aquí: http://fontawesome.io/get-started/
- Incluya este enlace en el encabezado de su archivo html de índice
-
No olvide eliminar todo lo que ya haya agregado para intentar que funcione: el paquete npm (y su referencia en su package.json), la referencia en su archivo aurelia.json, cualquier tarea personalizada que haya creado, cualquier etiqueta
<require>, ...
No necesitas más esto:
en 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/"
}
Consulte la sección Configuración para copiar archivos
Espero ayudarte.
Para aquellos que desean usar la versión sass de font-awesome
1) Instalar font-awesome
npm install font-awesome --save
2) Copie las fuentes de font-awesome en el directorio raíz de su proyecto
cp -r node_modules/font-awesome/fonts .
3) Incluya el directorio font-awesome sass en la tarea del procesador 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) Importa font-awesome en tu aplicación scss
# src/app.scss
@import ''font-awesome'';
5) Requiere su aplicación scss en su html
# src/app.html
<template>
<require from="./app.css"></require>
</template>