Aurelia CLI font-awesome

Question

Ich habe mehrere verschiedene Lösungen ausprobiert, aber kein einziges hat für mich gearbeitet.

Ich benutze.NET Core, neueste Aurelia/Aurelia CLI und Font-Awesome installiert mit npm install font-awesome --save.

Lösung 1:

Neue Datei: prepare-font-awesome.js in Ordner \ aurelia_project \ tasks

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); 
} 

Aktualisiert build.js \ aurelia_project \ Aufgaben

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

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

Enthaltene Schriftart-ehrfürchtig in html

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

Fehler:

GET http://localhost:9000/scripts/css/font-awesome.min.css

Lösung 2:

Aktualisiert aurelia.json

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

Hinzugefügt Font-Dateien in root/font-awesome/fonts

inklusive Schriftart -wesome in html

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

Fehler: Kein Fehler, aber Symbole sind nicht

gezeigt

Lösung 3:

Aktualisiert 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(); 
} 

Aktualisiert aurelia.json

{ 
    "name": "font-awesome", 
    "main":"", 
    "path": "../node_modules/font-awesome", 
    "resources": [ 
     "css/font-awesome.css", 
     "/fonts/fontawesome-webfont.woff2", 
     "/fonts/FontAwesome.otf", 
     "/fonts/fontawesome-webfont.eot", 
     "/fonts/fontawesome-webfont.svg", 
     "/fonts/fontawesome-webfont.ttf" 
    ] 
} 

Inclu ded font-awesome in html

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

Fehler:

get: http://localhost:9000/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 (same with woff and ttf)

Es ist wirklich seltsam, weil die Dateien kopiert werden und die URL korrekt ist ..

Ordnerstruktur:

Getestet ein paar verschiedene Quellen

Was fehlt mir?

Ich würde eine weniger Implementierung bevorzugen, damit ich Font-Awesome in meinem Master weniger Datei importieren kann.

Answer 1

Ausgehend von der Diskussion, da Sie Ihr Projekt in den Ordner wwwroot hosten, müssen Sie Ihre "gets" für Dateien von dort basieren.
Also, wenn Sie Ihre Schriftart-Dateien in wwwroot/fonts/font-name.woff (oder irgendwo dort) verschieben, sollten Sie golden sein.