MaY*_*YaN 30 javascript font-awesome aurelia aurelia-framework
我一直在关注Contact Manager教程,并希望将Font Awesome添加到项目中.这是我到目前为止所做的:
npm install Font-Awesome --saveaurelia.json的依赖项数组下添加了以下内容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文件？
Jay*_*yDi 53
不要将字体真棒资源添加到aurelia.json - 你也需要字体文件,Aurelia不会处理.而是采取以下步骤.
首先,如果您已经为aurelia.json文件添加了任何font-awesome,请再次删除它.
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夹中的文件并插入以下两行; 这将导入新函数并执行它:
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文件)中使用font-awesome图标.
请注意,这适用于任何需要手动包含的资源的复杂第三方库.
4im*_*ble 12
以下是我用于将Font-Awesome引入使用CLI的Aurelia项目的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>
================================================== =======================
当我从不同的位置提供我的文件时,我需要能够调整配置的字体位置.因此,如果您需要执行相同的操作并指定字体的存储位置,则以下是所涉及的步骤.我正在使用.less
1,2)如上所述.
3)您需要在自己较少的文件中引用较少的字体(我的名称为site.less),然后将其设置@fa-font-path为自定义位置,而不是添加到捆绑中.
@import "../node_modules/font-awesome/less/font-awesome.less";
@fa-font-path: "fonts";
4)没有4,使用此方法只要您已经site.css引用了自己编译的等效文件(使用导入),您就不需要添加任何其他内容.
小智 8
有趣的是,我试图在今天早上做同样的事情.这就是我在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>
实际上没有回答你如何使用NPM在你的应用程序中集成Font Awesome的问题,但是有一种替代的,干净的方式来在你的应用程序中使用它:使用CDN.
正如其他答案所述,Aurlia目前不支持使用CLI捆绑除js,css和html以外的资源.关于这个主题有很多讨论,有几个,大多是hacky,解决方法,就像这里建议的一些.
Rob Eisenberg说他计划将它正确地集成到Aurelia CLI中,但他认为它的优先级低,因为有一个简单的解决方法.引用他:
当然有兴趣解决这个问题.但是,它的优先级低于CLI列表中的其他内容,部分原因是简单的链接标记可以解决问题,并且比在CLI中解决此问题的工作要容易得多.
资料来源:https://github.com/aurelia/cli/issues/248#issuecomment-254254995
<require>标签,......现在支持自动导入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
快乐编码
我意识到/阅读了这些不复制字体文件的评论.这是一个更新的构建脚本(es6),它将复制任何资源并将文件夹添加到git ignore.如果你想要打字稿版本,请点击这里
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();
}