Jquery Aurelia CLI：将带有映像资源的npm包添加到Aurelia CLI项目

我试图在我的Aurelia CLI 0.23.0项目中使用来自NPM

我已将此添加到aurelia.json依赖项中：

        {
        "name": "lightslider",
        "path": "../node_modules/lightslider/dist",
        "main": "js/lightslider.min",
        "deps": ["jquery"],
        "resources": [
          "css/lightslider.min.css"
        ]
      },

已将此添加到my home.html模板：

<require from="lightslider/css/lightslider.min.css"></require>

--

该库还具有img/controls.png，如果我在参考资料下添加aurelia.json依赖项，如下所示：

          {
        "name": "lightslider",
        "path": "../node_modules/lightslider/dist",
        "main": "js/lightslider.min",
        "deps": ["jquery"],
        "resources": [
          "css/lightslider.min.css",
          "img/controls.png"
        ]
      },

它在查找img/controls.js时返回错误

因此，我在根目录中添加了lightslider/img/controls.png，效果很好，但是有没有正确的方法可以跳过这一步，而不需要我手动将图像资源添加到根目录中

我在字体资源中发现了与字体相关的类似讨论，但我找不到合适的解决方案来将其应用到我的案例中

---

提前感谢。

我能找到的获取aurelia.json处理.js、.css和.html以外的其他资源的最简单方法是通过MannikJ。我已将aurelia_项目/tasks/build.ts更新为：

import*作为“gulp”中的gulp；
从“/transfile”导入transfile；
从“/process markup”导入processMarkup；
从“/process css”导入processCSS；
从'aurelia cli'导入{build}；
从“../aurelia.json”导入*作为项目；
从“fs”导入*作为fs；
从“readline”导入*作为readline；
从“操作系统”导入*作为操作系统；
导出默认的gulp.series(
其他资源，
readProjectConfiguration，
一饮而尽(
透明的，
进程标记，
过程
),
写钱包
);
功能copyAdditionalResources（完成）{
readGitIgnore（）；
完成（）；
}
函数readGitIgnore（）{
让lineReader=readline.createInterface({
输入：fs.createReadStream（'./.gitignore'）
});
让gitignore:Array=[]；
lineReader.on（'line'，（line）=>{
推（线）；
});
lineReader.on（'关闭'，（错误）=>{
复制文件（gitignore）；
})
}
函数copyFiles（gitignore:Array）{
让溪流，
bundle=project.build.bundles.find（函数（bundle））{
返回bundle.name==“vendor bundle.js”；
});
//迭代aurelia.json中指定的所有依赖项
for（设i=0；i{if（err）{console.log（err）}}）；
}
for（设m=0；m

---

这是typescript版本，您可以找到ES6版本。我没有测试过它，但是Typescript版本对我来说非常好。

我能找到的最简单的方法是通过MannikJ获得aurelia.json来处理.js、.css和.html以外的其他资源。我已将aurelia_项目/tasks/build.ts更新为：

import*作为“gulp”中的gulp；
从“/transfile”导入transfile；
从“/process markup”导入processMarkup；
从“/process css”导入processCSS；
从'aurelia cli'导入{build}；
从“../aurelia.json”导入*作为项目；
从“fs”导入*作为fs；
从“readline”导入*作为readline；
从“操作系统”导入*作为操作系统；
导出默认的gulp.series(
其他资源，
readProjectConfiguration，
一饮而尽(
透明的，
进程标记，
过程
),
写钱包
);
功能copyAdditionalResources（完成）{
readGitIgnore（）；
完成（）；
}
函数readGitIgnore（）{
让lineReader=readline.createInterface({
输入：fs.createReadStream（'./.gitignore'）
});
让gitignore:Array=[]；
lineReader.on（'line'，（line）=>{
推（线）；
});
lineReader.on（'关闭'，（错误）=>{
复制文件（gitignore）；
})
}
函数copyFiles（gitignore:Array）{
让溪流，
bundle=project.build.bundles.find（函数（bundle））{
返回bundle.name==“vendor bundle.js”；
});
//迭代aurelia.json中指定的所有依赖项
for（设i=0；iattached() {
    $(document).ready(function(){
        $("#light-slider").lightSlider();
    });

}

          {
        "name": "lightslider",
        "path": "../node_modules/lightslider/dist",
        "main": "js/lightslider.min",
        "deps": ["jquery"],
        "resources": [
          "css/lightslider.min.css",
          "img/controls.png"
        ]
      },

import * as gulp from 'gulp';
import transpile from './transpile';
import processMarkup from './process-markup';
import processCSS from './process-css';
import { build } from 'aurelia-cli';
import * as project from '../aurelia.json';
import * as fs from 'fs';
import * as readline from 'readline';
import * as 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: Array<String> = [];

  lineReader.on('line', (line) => {
    gitignore.push(line);
  });

  lineReader.on('close', (err) => {
    copyFiles(gitignore);
  })
}

function copyFiles(gitignore: Array<String>) {
  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();
}