Best practice to add a non bower package?

sage
#1

Hi there,

I was wundering what the best practice is for adding a jquery plugin that is not available as a bower package in the ‘new’ gulp setup?

You were able to put plugins in the /assets/js/plugins/ folder and they got compiled with the Grunt workflow like this:

var jsFileList = [
 'assets/js/plugins/*.js'
];

Am I supposed to manually add it in my bower.json?

Because when I add a directory plugins in my /assets/scripts/ and place the plugin’s jquery file in there and run gulp it doesn’t get compiled? If I place a script directly in the /assets/scripts/ it also doesn’t get compiled?

Probably need to add something to my gulpfile.js but not sure where exactly…
Thanks!

#2

Right now I added it into the manifest.json file like this:

"main.js": {
      "files": [
        "scripts/main.js"
      ],
      "vendor": [
        "assets/scripts/plugins/fresco/fresco.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "vendor": [
        "assets/styles/plugins/fresco/fresco.css"
      ],
      "main": true
    },

I think this is the correct way, however in this fresco.css stylesheet there is a reference to a svg sprite in a skin subdirectory.

How are you supposed to handle this?
Should I add these files to the main.css vendor files like this:

"main.css": {
  "files": [
    "styles/main.scss"
  ],
  "vendor": [
    "assets/styles/plugins/fresco/fresco.css",
    "assets/styles/plugins/fresco/skins/fresco/sprite.png",
    "assets/styles/plugins/fresco/skins/fresco/sprite.svg"
  ],
  "main": true
},

Or am I supposed to override the css referring to these sprites in my own scss files and copy the sprites in my assets images folder?