Adding non-bower packages

sage
1

I’m trying to add some style and script files to the asset pipeline, I want them to concatenate into the main.css and main.js files, but I’m not sure on the best practice.

I tried adding them to the manifest.json as a few others suggested but that hasn’t worked for me thus far:

"dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "vendor": [
        "assets/scripts/plugins/owl.carousel.min.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "vendor": [
        "assets/styles/plugins/owl.carousel.css",
        "assets/styles/plugins/owl.theme.css",
        "assets/styles/plugins/owl.transitions.css"
      ],
      "main": true
    },

I was also wondering about the best way to include scripts such as this one? -->

<script> 
function buttonClick() { swal({  title: '', html: '', showConfirmButton: true, closeOnConfirm: false }); }
</script>

As I’m assuming there is a much better way then sticking it in the footer template file for instance.

2

hello
You should NOT include assets folder.
There is good documentation here : https://github.com/austinpray/asset-builder/blob/master/help/spec.md

"dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "vendor": [
        "scripts/plugins/owl.carousel.min.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "vendor": [
        "styles/plugins/owl.carousel.css",
        "styles/plugins/owl.theme.css",
        "styles/plugins/owl.transitions.css"
      ],
      "main": true
    },
3

but I think it is best practice to install you "non-bower dependencies with bower (to manage future updates with bower directly):
bower install https://github.com/OwlFonk/OwlCarousel.git --save
Then you edit your overrides in bower.json and you include only the files that you need like

"overrides": {
    "package-name-in-bower-components": {
      "main": [
        "./path-inside-package/filename.css",
        "./path-inside-package/bootstrap/filename.js",
      ]
    },

after that, you don’t need to do anything in manifest.json.
gulp will automatically include the files in your main css/js file.

4

For your question about buttonClick, there is the splendid austin response from here