# Third party js Gulp build issue

**URL:** https://discourse.roots.io/t/third-party-js-gulp-build-issue/11469
**Category:** sage
**Tags:** sage8, gulp
**Created:** 2018-02-02T10:14:21Z
**Posts:** 9

## Post 1 by @tezza-sr — 2018-02-02T10:14:22Z

Hey guys, I’m having issues with building the vendor js files as part of the assets for production. So I have saved all my third party js files under assets/scripts/vendor/ folder and my manifest.json configurations look like this:

```
"main.js": {
      "files": [
        "scripts/main.js",
        "scripts/vendor/anime.min.js",
        "scripts/vendor/fluid-animation.js",
        "scripts/vendor/jquery.waypoints.min.js",
        "scripts/vendor/slick.min.js"
      ],
      "main": true
    },
```

When I hit “gulp” in my terminal, it throws me heaps errors and saying the third party codes are missing this and that. All I want just compile these codes into the main.js or ended up in the dist folder, just like how grunt.js does.

I feel that I’ve got the configuration wrong, so could you guys point me to the right direction please? Thanks heaps!

---

## Post 2 by @mmirus — 2018-02-02T15:52:02Z

Hi @tezza-sr,

Here’s how I did this on one project a while back…

Vendor JS placed in `assets/vendor/`.

In `manifest.json`:

```
{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "vendor": [
        "assets/vendor/lunametrics-youtube.gtm.mm.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "..."
  }
}
```

I think the important thing is not where the vendor files are stored but putting their paths inside the `vendor` property rather than inside the `files` property; I believe that tells the build process not to lint them, etc., which may work around the errors you’re getting–but that depends on the exact problem you’re running into.

Let me know if that helps!

– Matt

---

## Post 4 by @tezza-sr — 2018-02-05T08:53:01Z

Thanks for the reply @mmirus , it really helps! The “gulp” command runs without any issues now. However, the thrid party scripts are not included. What’s the proper way to link them with the theme? I’ve tried the wp\_enqueue\_script(), which looks like:

wp\_enqueue\_script(‘anime’, asset\_path(’…/assets/scripts/vendor/anime.min.js’), [‘jquery’], null, true);

This method worked fine, but just double checking.

---

## Post 5 by @mmirus — 2018-02-05T16:04:19Z

Hey @tezza-sr - to make sure, when you say they aren’t being included, did you check that their contents aren’t found in `dist/scripts/main.js` after you run `gulp build`? If things are working properly, you shouldn’t need any extra steps (but you also wouldn’t see the additional scripts being loaded in your site’s HTML, since they are being compiled into `main.js`).

– Matt

---

## Post 6 by @ben — 2018-02-05T16:22:38Z

> [@tezza-sr](#):
>
> When I hit “gulp” in my terminal, it throws me heaps errors and saying the third party codes are missing this and that.

We need to see the actual errors from your terminal output. Please don’t ever hold this information back when asking for support.

---

## Post 7 by @tezza-sr — 2018-02-06T02:47:38Z

Hi @mmirus, yep the third party codes are not being compiled in the dist/scripts/main.js , very strange. The steps should be pretty straight forward I reckon.

---

## Post 8 by @tezza-sr — 2018-02-06T02:56:41Z

Hey @ben yes sure. So after compiling the codes via gulp, the console is telling me errors like: Uncaught TypeError: t(…).waypoint is not a function

Which clearly the third party codes are not being included yet. But I’ve checked my manifest.jason file, the file hierarchy is correct. Weird.

Here is what my manifest.jason looks like:

```
{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "vendor": [
        "scripts/vendor/anime.min.js",
        "scripts/vendor/fluid-animation.js",
        "scripts/vendor/jquery.waypoints.min.js",
        "scripts/vendor/slick.min.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://local.development.com/"
  }
}
```

---

## Post 9 by @mmirus — 2018-02-06T16:52:42Z

> [@tezza-sr](#):
>
> ```
> “vendor”: [
> “scripts/vendor/anime.min.js”,
> “scripts/vendor/fluid-animation.js”,
> “scripts/vendor/jquery.waypoints.min.js”,
> “scripts/vendor/slick.min.js”
> ],
> ```

Maybe this should be:

```
“vendor”: [
    “assets/scripts/vendor/anime.min.js”,
    “assets/scripts/vendor/fluid-animation.js”,
    “assets/scripts/vendor/jquery.waypoints.min.js”,
    “assets/scripts/vendor/slick.min.js”
],
```

From the [asset-builder docs](https://github.com/austinpray/asset-builder/blob/master/help/spec.md):

> A path inside the _files_ property such as `scripts/main.js` will be transformed to `assets/scripts/main.js` if your manifest’s paths.source is `assets/` and the dependency’s external property is not set to true. The _vendor_ property paths are **relative to your project root**. If you are using gulp, this is typically where your gulpfile.js is located.