Roots Discourse

Bower dependencies go into dist folder but not showing up in my inspector

gulp
sage8

#1

What I’m looking to get out of this post is an explanation of why my bower dependencies make it go into my dist/scripts folder but not onto my live site.

I first install my js library with bower:

$ bower install gsap --save

noting that I deleted all my dependencies except popper.js and jquery.js.

Then I gulp so the dependencies will go into my dist folder:

$ gulp

Which works, jquery.gsap.min.js goes into my dist folder:

But I check my inspector and these js libraries are still not appearing in my source code:
08 PM

Am I doing something wrong? Isn’t the point to have bower/gulp combo is to push the js libraries into the dist folder? I just want to be able to use my javascript libraries! HELP

I’ve tried dropping them straight into assets/scripts but that doesn’t carry over into dist/scripts


#2

Usually the sage 8 gulp workflow will automatically concatenate your added packages into main.js, so you might check and see if that’s happening. Not all Bower packages do that correctly though, and your config is spitting out a separate file already, which seems odd. The following gives a bit if information on loading and defining compiled files, which hopefully can help you troubleshoot your situation.

If you look in lib/setup.php in your theme, you can find an example to follow for enqueuing JS (this is how Sage’s basic javascript is loaded):

function assets() {
  // snip...
  wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);

To add the file you’re trying to load, you might add a line wp_enqueue_script(), so that it looks something like this:

function assets() {
  // snip...
  wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
  wp_enqueue_script('jquery/gsap', Assets\asset_path('scripts/jquery.gsap.min.js'), ['jquery'], null, true);
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);

That will enqueue your JS file, which will cause it to get printed out when your page is rendered!

If what you’re looking for is to have jquery.gsap.min.js concatenated in to the rest of your javascript (i.e. so that you can directly reference it in your custom JS without worrying about load order), and that isn’t happening automatically, you can open up sage/assets/manifest.json and modify it.

Right now it probably looks kind of like this (I trimmed it down to make it more readable here):

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
}

You’d probably want to add it to main.js so that you can get at it when you’re writing stuff in scripts/main.js, so you would add it to the dependency above, something like this:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "bower": ["gsap"],
      "main": true
    },
}

(Full disclosure: It’s been a while since I used Sage 8, but I think that’s the correct syntax. Read over the official syntax if that doesn’t work.)

If that doesn’t work, you can point it directly at the js file you want to load in bower_components. You’d probably want to load it in ‘vendor’ to avoid linting complaints:

"vendor": [
   "bower_components/package/js/file.js"
]

That should cause GSAP to get concatenated into your main.js when gulp builds it.


#3

@alwaysblank, thank you for your quick response!! I am getting an error after adding all of those to my code:

01 PM

I tried switching it to TimelineMax.min.js instead too:

manifest.json:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "vendor": [
       "bower_components/gsap/src/minified/TimelineMax.min.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "jquery.gsap.js": {
      "bower": ["gsap"]
    }
  },
  "config": {
    "devUrl": "http://localhost:8888/ji/"
  }
}

lib/setup.php:

function assets() {
  wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null);
 if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }
 wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
  wp_enqueue_script('sage/js', Assets\asset_path('scripts/TimelineMax.min.js'), ['jquery'], null, true);
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);

Should I just try to use a different theme? I’m at the end of my rope and time is of the essence. I am new to bower and not sure how to trouble shoot it.


#4

This is a sequencing issue. The way you’re compiling and/or enqueuing your scripts is causing your main.js references to TimeLineMax to appear before the actual inclusion of TimeLineMax.

Can you share your main.js content? I’ll bet that if you wrap your references to TimeLineMax in a jQuery( document ).ready(function() { ... }); it would work, but that’s a guess without seeing the code.


#5

Yes! Heres my main.js:

(function($) {

  // Use this variable to set up the common and page specific functions. If you
  // rename this variable, you will also need to rename the namespace below.
  var Sage = {
    // All pages
    'common': {
      init: function() {
        // JavaScript to be fired on all pages


        jQuery( document ).ready(function() {
        // TICKER
        var $tickerWrapper = $(".tickerwrapper");
        var $list = $tickerWrapper.find("ul.list");
        var $clonedList = $list.clone();
        var listWidth = 500;
        $list.find("li").each(function (i) {
          listWidth += $(this, i).outerWidth(true);
        });

        var endPos = $tickerWrapper.width() - listWidth;

        $list.add($clonedList).css({
          "width" : listWidth + "px"
        });

        $clonedList.addClass("cloned").appendTo($tickerWrapper);

        //TimelineMax
        var infinite = new TimelineMax({force3D:true, repeat: -1, paused: false});
        var time = 20;

        infinite.fromTo($list, time, {x:0}, {x: -listWidth, ease: Linear.easeNone}, 0);
        infinite.fromTo($clonedList, time, {x:listWidth}, {x:0, ease: Linear.easeNone}, 0);
        infinite.set($list, {x: listWidth});
        infinite.to($clonedList, time, {x: -listWidth, ease: Linear.easeNone}, time);
        infinite.to($list, time, {x: 0, ease: Linear.easeNone}, time);

      });

      },
      finalize: function() {
        // JavaScript to be fired on all pages, after page specific JS is fired
      }
    },
    // Home page
    'home': {
      init: function() {
        // JavaScript to be fired on the home page

      },
      finalize: function() {
        // JavaScript to be fired on the home page, after the init JS
      }
    },
    // About us page, note the change from about-us to about_us.
    'about_us': {
      init: function() {
        // JavaScript to be fired on the about us page
      }
    }
  };

  // The routing fires all common scripts, followed by the page specific scripts.
  // Add additional events for more control over timing e.g. a finalize event
  var UTIL = {
    fire: function(func, funcname, args) {
      var fire;
      var namespace = Sage;
      funcname = (funcname === undefined) ? 'init' : funcname;
      fire = func !== '';
      fire = fire && namespace[func];
      fire = fire && typeof namespace[func][funcname] === 'function';

      if (fire) {
        namespace[func][funcname](args);
      }
    },
    loadEvents: function() {
      // Fire common init JS
      UTIL.fire('common');

      // Fire page-specific init JS, and then finalize JS
      $.each(document.body.className.replace(/-/g, '_').split(/\s+/), function(i, classnm) {
        UTIL.fire(classnm);
        UTIL.fire(classnm, 'finalize');
      });

      // Fire common finalize JS
      UTIL.fire('common', 'finalize');
    }
  };

  // Load Events
  $(document).ready(UTIL.loadEvents);

})(jQuery); // Fully reference jQuery after this point.

#6

I am NOT the JavaScript expert here and Sage’s js routing makes my ears bleed a little but I THINK if you move the above out of the init() event and put it at the bottom of the document it’ll work?


#7

19 PM

I don’t know what I am doing wrong, but I am setting up a Underscores theme to get this problem over with so I can move on to designing this website! Thank you for trying to help me!

I’m still open to any advice or if anyone else has experienced this before to share how to fix.


#8

You need to fully reference jQuery. On that line, replace $(“.tickerwrapper”) with jQuery(".tickerwrapper").


#10

I’m still getting an error same as above TimelineMax is not defined

Would it help to see my gulp.js or bower.json? I’ll post whatever to try and solve this.

I’m really sad this isn’t working because Sage is so well organized.


#11

So it’s definitely a problem with the order in which things are loading. By the time main.js asks for TimelineMax it hasn’t yet been defined.

Try this:

Change the lines you added to the assets() function to be as follows:

wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery', 'sage/timelinemax'], null, true);
wp_enqueue_script('sage/timelinemax', Assets\asset_path('scripts/TimelineMax.min.js'), ['jquery'], null, true);

#12

@dearnaomichan can you please post your HTML markup too?

So far I’ve started with a brand new Sage install (v8.5.3… if you’re using a diff version please let me know) and I’ve installed GSAP via Bower, gulps just fine even with your main.js and no console errors.

Having your HTML would be great to ensure it’s truly working.

EDIT: I just plugged in a basic UL with the classes mentioned in your JS and all works as expected without any console errors. I didn’t have to do any Bower overrides, no messing with manifest.json at all, and no separate enqueueing. This is on a fresh theme with no plugins. All I did was install GSAP via Bower exactly as you did, then ran gulp and it worked, so something else must be going on with your theme or WP install.

Which version of Sage are you using? What other Bower packages have you installed? Do you have any WordPress plugins that could be affecting your scripts?

Please revert your manifest.json and assets() in lib/setup.php to their originals, move your jQuery back into the init() function, run gulp again, and post the results here.

EDIT: I was able to reproduce your initial console error when I added this to my manifest.json:

"jquery.gsap.js": {
  "bower": ["gsap"]
}

The only reason you would add that (and nothing else) to your manifest is if you want Gulp to spit GSAP out into its own separate file, which your screenshot shows that it did as expected. You’d then enqueue that file if you want to include GSAP on certain pages only, in which case you would also then modify your assets() function to something like this:


function assets() {
  wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null);

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  if($page_requires_gsap_library) {
    wp_enqueue_script('sage/gsap', Assets\asset_path('scripts/jquery.gsap.js'), ['jquery'], null, true);
    wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery', 'sage/gsap'], null, true);
  } else {
    wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
  }
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);

Note that on the pages that require GSAP our main.js declares GSAP as a dependency, so we ensure GSAP is enqueued before it’s invoked it in main.js.

GSAP minified is ~114kb which may determine whether you think it can load on each page, or whether you need to load it conditionally as above.


#13

All of this is one of the reasons I’ve grown to like Sage9’s approach to asset building. Sure, you have to import each library yourself, but there’s a lot less ambiguity about whether something will work or be loaded in the right order.


#14

UPDATE:

I installed a new Sage 8 theme and the first thing I did was install gsap:
bower install gsap --save ,

added my javascript to assets/main.js,
(same as above)

and its working now. I am not sure what was going on with the old theme. I may have messed it up along the way of trying to figure out what was wrong. Sorry, this conversation came to an end without a resolve!

But after cfx said they added a new theme and added gsap and it worked all fine. That was enough for me to just go that route. I’m gonna add my scss to this new theme now and I will add updates or come back if the same issue occurs. Thank you for all your help! :woman_technologist:t3:


#15

Glad you got it up and running. I’ll bet it was fiddling around inside manifest.json that set things off :wink: