Aurelia CLI : Adding npm package with image resources to Aurelia CLI project

Question

I'm trying to use lightslider (jquery slider library) from NPM in my Aurelia CLI 0.23.0 project.

I have added this to the aurelia.json dependencies:

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

added this to my home.html template :

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

and in home.ts i've added these :

import * as $ from 'jquery';
import lightSlider from 'lightslider';

--

attached() {
    $(document).ready(function(){
        $("#light-slider").lightSlider();
    });

}

The library also has img/controls.png which if i add the the aurelia.json dependencies under resources like this :

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

it returns error as it looks for img/controls.js.

therefor I have added the lightslider/img/controls.png in the root directory and it works fine, but is there any correct way to be able to skip this step and it doesn't requires me to add the image resource to the root directory manually?

I have found simillar discussion related to Font-awesome in this post for the font resources but i couldn't find the proper solution to be able to apply it in my case.

Thanks in advance.

Answer 1

The simplest way I could find to get aurelia.json handles the other resources than .js, .css and .html was via this answer by MannikJ. I have updated the aurelia_project/tasks/build.ts to :

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

This is the typescript version ,you can find the ES6 version in here. I have not tested it but the Typescript version worked perfectly for me.