web-dev-qa-db-ja.com

npmを使用してAureliaプロジェクトにFont Awesomeを追加するにはどうすればよいですか？

Contact Manager チュートリアルに従っていますが、プロジェクトにFont Awesomeを追加したいと思います。これまでに私がやったことは次のとおりです。

  • npm install Font-Awesome --save
  • 以下をaurelia.jsonのdependencies配列の下のvendor-bundle.jsに追加しました：


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

しかし、au run --watchを実行すると、エラーが発生します。

エラーC：\ Users\node_modules\font-awesome.js

なぜ。jsファイルを探しているのですか？

javascriptfont-awesomeaureliaaurelia-framework
30
MaYaN

フォントの素晴らしいリソースをaurelia.jsonに追加しないでください-Aureliaが処理しないフォントファイルも必要になります。代わりに、次の手順を実行します。

まず、既にawesomeに何かフォントを追加している場合は、aurelia.jsonファイル、もう一度削除します。

新しいファイルを追加prepare-font-awesome.jsフォルダー\aurelia_project\tasksそして、以下のコードを挿入します。 font-awesomeリソースファイルを出力フォルダーにコピーします（設定どおり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フォルダーを開き、次の2行を挿入します。これにより、新しい関数がインポートされ、実行されます。

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">

それで全部です; Aureliaビューモジュール（htmlファイル）でフォントが素晴らしいアイコンを使用できるようになりました。

これは、手動で含める必要があるリソースを必要とする複雑なサードパーティライブラリで機能することに注意してください。

53
JayDi

シンプルなデフォルト設定方法

以下は、CLIを使用するAureliaプロジェクトにFont-Awesomeを取り込むために使用する4つの簡単な手順です。

1）npm install font-awesome --save

2）copyFilesをaurelia.jsonのビルドに追加します

"build": {
    "copyFiles": {
      "node_modules/font-awesome/fonts/*": "/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>

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

代替案

カスタムフォントの場所を指定する

別の場所からファイルを提供していたので、設定したフォントの場所をtweekできるようにする必要がありました。そのため、同じことを行い、フォントの保存場所を指定する必要がある場合の手順を以下に示します。私は.lessを使用しています

1、2）上記のとおり。

3）バンドルに追加する代わりに、独自のlessファイル内のfont-awesome lessファイルを参照し（私の場合はsite.lessと呼ばれます）、@fa-font-pathをカスタムの場所に設定する必要があります。

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

4）このメソッドでは、コンパイル済みの同等のsite.cssファイルが既に（インポートで）参照されている限り、他に何も追加する必要はありません。

12
4imble

Font Awesomeをアプリケーションに統合する方法を使用してNPMを使用するという質問には実際に答えていませんが、アプリケーションでそれを取得する代替のクリーンな方法があります：CDNを使用します。

他の回答で述べたように、Aurliaは現在、CLIを使用したjs、css、およびhtml以外のバンドルリソースをサポートしていません。このテーマについては多くの議論がありますが、ここで提案されているように、いくつかの、主にハックな回避策があります。

Rob Eisenbergは、Aurelia CLIに適切に統合することを計画していると言いますが、簡単な回避策があるため、それを優先度が低いと考えています。彼を引用するには：

もちろん、これに取り組むことに関心があります。ただし、CLIのリストにある他の項目よりも優先度が低くなります。これは、単純なリンクタグが問題を解決し、CLI内でこれを解決するために必要な作業よりもはるかに簡単だからです。

出典： https://github.com/aurelia/cli/issues/248#issuecomment-254254995

  1. 一意のCDNリンクをここに郵送してください： http://fontawesome.io/get-started/
  2. このリンクをインデックスHTMLファイルのヘッドに含めます
  3. Npmパッケージ（およびpackage.json内のその参照）、aurelia.jsonファイル内の参照、作成したカスタムタスクなど、既に追加されている可能性があるものすべてを削除することを忘れないでください。どれか <require>タグ、...
8
Vincent Sels

おかしい私は今朝同じことを働かせようとしていた。これは、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>
8
Grace W.

css/fontsの自動インポートがサポートされるようになりました。

{
    "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
ハッピーコディング

編集

これはフォントファイルをコピーしないというコメントに気づいた/読んだ。リソースをコピーし、git ignoreにフォルダーを追加する更新されたビルドスクリプト（es6）を次に示します。 TypeScriptのバージョンを確認するには、こちらをご覧ください
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

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>
3
Marton Sagi

これ以上は必要ありません。

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

「ファイルをコピーするためのセットアップ」セクションを参照

お役に立てば幸いです。

3
Sebastiao Marcos

Sassバージョンのfont-awesomeを使用する場合

1）font-awesomeをインストールする

npm install font-awesome --save

2）font-awesomeのフォントをプロジェクトのルートディレクトリにコピーする

cp -r node_modules/font-awesome/fonts .

3）aurelia cssプロセッサタスクにfont-awesome sassディレクトリを含める

# 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にfont-awesomeをインポートする

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

5）HTMLでアプリのscssを要求する

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