Third party js Gulp build issue

sage
,
1

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!

2

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

4

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.

5

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

6

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

7

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.

8

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/"
  }
}
9

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:

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.