Aurelia CLI字体超赞 [英] Aurelia CLI font-awesome

问题描述

我尝试了几种不同的解决方案，但没有一个对我有用。

我正在使用.NET Core，最新的Aurelia / Aurelia CLI和Font -使用npm install font-awesome --save安装-awesome。

解决方案1：

新文件：文件夹\aurelia_project\tasks中的prepare-font-awesome.js

 从'gulp导入gulp '; 
来自合并流的导入合并； 
的导入内容从就地更改进行了更改；来自 ../aurelia.json的
导入项目； 
 
导出默认函数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从'./prepare-font-awesome'的prepareFontAwesome; //我们的自定义任务
 
导出默认gulp.series（
 readProjectConfiguration，
 gulp.parallel（
 transpile，
 processMarkup，
 processCSS ，
 prepareFontAwesome //我们的自定义任务
），
 writeBundles 
）; 
  

html中包含超棒的字体

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

错误：

获取

测试了几个不同的来源

我缺少了什么？

我希望使用较少的实现，以便可以在我的主文件较少的文件中导入Font-Awesome。

解决方案

基于讨论的内容，因为您是主持专业人士在 wwwroot 文件夹中，您必须从此处获取文件的获取。

因此，如果将字体文件移至 wwwroot / fonts / font-name.woff （或附近），您应该会很高兴。

I've tried several different solutions but not a single one have worked for me.

I'm using.NET Core, latest Aurelia/Aurelia CLI and Font-Awesome installed using npm install font-awesome --save.

Solution 1:

New file: prepare-font-awesome.js in folder \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);
}

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

Included font-awesome in html

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

Error:

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

Solution 2:

Updated aurelia.json

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

Added font files in root/font-awesome/fonts

Included font-awesome in html

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

Error: No error but icons are not shown

Solution 3:

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

Updated 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"
    ]
}

Included font-awesome in html

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

Error:

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

It's really strange because the files are copied and the url is correct..

Folder structure:

Tested a couple of different sources

What am I missing?

I would prefer a less implementation so I can import Font-Awesome in my master less file.

解决方案

Based off of the discussion, since you are hosting your project inside the wwwroot folder, you must base your "gets" for files from there.
So, if you move your font files into wwwroot/fonts/font-name.woff (or somewhere thereabouts), you should be golden.

这篇关于Aurelia CLI字体超赞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！