title: Uncaught TypeError: $(...).flexslider is not a function using gulp and bower
body: <p>I am currently having an issue configuring flexslider on my site. I am using elixir laravel and bower.</p>
  
  <p>I have all my scss, less and js files compiled but when I add anything code relating to the slider on my homepage I get this error: </p>
  
  <pre><code>Uncaught TypeError: $(...).flexslider is not a function using 
  </code></pre>
  
  <p>nothing seems to be showing up on my page at all</p>
  
  <p>I added the javascript in the layout.blade file just to test</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;title&gt;Creative Forces Enrichment&lt;/title&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'&gt;
     &lt;link rel="stylesheet" href="{{ elixir('css/app.css') }}"&gt;
     &lt;link rel="stylesheet" href="{{ elixir('css/style.css') }}"&gt;
  &lt;/head&gt;
      &lt;body id="app-layout"&gt;
          &lt;div class="line"&gt;&lt;/div&gt;
          &lt;header id="header" role="banner"&gt;
   &lt;div class="container"&gt;
  
                     &lt;!--    &lt;button class="hamburger hamburger--collapse" type="button"&gt;
                          &lt;span class="hamburger-box"&gt;
                              &lt;span class="hamburger-inner"&gt;&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/button&gt; --&gt;
  &lt;div class="container text-xs-center"&gt;
    &lt;nav class="nav nav-inline"&gt;
      &lt;a class="nav-link" href='{{ url("/") }}'&gt;Home&lt;/a&gt;
      &lt;a class="nav-link" href='{{ url("/team") }}'&gt;Our Team&lt;/a&gt;
      &lt;a class="nav-link" href='{{ url("/media") }}'&gt;Media&lt;/a&gt;
      &lt;a href='{{ url("/") }}' class="nav-link"&gt;&lt;img src="./images/zipzap.png" alt=""&gt;&lt;/a&gt;
      &lt;a class="nav-link" href='{{ url("/about") }}'&gt;About Us&lt;/a&gt;
      &lt;a class="nav-link" href='{{ url("/contact") }}'&gt;Contact Us&lt;/a&gt;
      &lt;a class="nav-link" href='{{ url("/donate") }}' id="donate"&gt;Support Us&lt;/a&gt;
    &lt;/nav&gt;   
  &lt;/div&gt;
      &lt;/div&gt;
     &lt;/header&gt;
  
  
          @yield('content')
          &lt;div class="container"&gt;
          &lt;div class="row"&gt;
          &lt;div class="text-xs-center spacing"&gt;
  
               &lt;hr&gt;
  
      &lt;div class="text-center copy"&gt;&amp;copy; Zip Zap Zop Enrichment &lt;?php echo date("Y") ?&gt;&lt;/div&gt;
  
   &lt;/div&gt;
  
           &lt;/div&gt;
       &lt;/div&gt;
  
          &lt;!-- JavaScripts --&gt;
           &lt;script src="{{ elixir('js/app.js') }}" type="text/javascript"&gt;&lt;/script&gt;
  
  
       &lt;script type="text/javascript"&gt;
          var metaslider_158 = function($) {
              $('#metaslider_158').addClass('flexslider'); // theme/plugin conflict avoidance
              $('#metaslider_158').flexslider({ 
                  slideshowSpeed:3000,
                  animation:"fade",
                  controlNav:false,
                  directionNav:false,
                  pauseOnHover:true,
                  direction:"horizontal",
                  reverse:false,
                  animationSpeed:600,
                  prevText:"&amp;lt;",
                  nextText:"&amp;gt;",
                  slideshow:false
              });
          };
          var timer_metaslider_158 = function() {
              var slider = !window.jQuery ? window.setTimeout(timer_metaslider_158, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_158, 1) : metaslider_158(window.jQuery);
          };
          timer_metaslider_158();
      &lt;/script&gt;
  
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is the page I want my slider to show up on:</p>
  
  <pre><code>@extends('layout')
  
  @section('content')
  
  &lt;!-- Place somewhere in the &lt;body&gt; of your page --&gt;
  &lt;!-- Place somewhere in the &lt;body&gt; of your page --&gt;
  &lt;div class="flexslider"&gt;
    &lt;ul class="slides"&gt;
      &lt;li&gt;
        &lt;iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&amp;player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="./images/maja.jpg" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="./images/maja.jpg" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="./images/maja.jpg" /&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="content-wrapper"&gt;
          &lt;div class="color-wrapper"&gt;
              &lt;div class="main-container"&gt;
                  &lt;div class="gdlr-item gdlr-post-slider-item style-post-right post-slider"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  @endsection
  </code></pre>
  
  <p>and here is my gulp.js file</p>
  
  <pre><code>var elixir = require('laravel-elixir');
  
  /*
   |--------------------------------------------------------------------------
   | Elixir Asset Management
   |--------------------------------------------------------------------------
   |
   | Elixir provides a clean, fluent API for defining some basic Gulp tasks
   | for your Laravel application. By default, we are compiling the Sass
   | file for our application, as well as publishing vendor resources.
   |
   */
  
  elixir(function(mix) {
      // Copy Styles
      mix.copy('bower_components/bootstrap/scss/', 'resources/assets/sass/libraries/bootstrap/')
         .copy('bower_components/css-hamburgers/_sass/hamburgers', 'resources/assets/sass/libraries/hamburgers/')
         .copy('bower_components/flexslider/css', 'resources/assets/less/libraries/flexslider/')
  
      // Copy Scripts
      .copy('bower_components/jquery/dist/jquery.js', 'resources/assets/js/libraries/jquery.js')
      .copy('bower_components/bootstrap/dist/js/bootstrap.js', 'resources/assets/js/libraries/bootstrap.js')
      .copy('bower_components/flexslider/jquery.flexslider.js', 'resources/assets/js/libraries/flexslider.js')
  
  
      // Compile App Assets
      .sass('app.scss','public/css/app.css')
      .less('app.less','public/css/style.css')
  
      .scripts([
      'libraries/jquery.js',
      'libraries/bootstrap.js',
      'libraries/flexslider.js',
      'app/**/*.js'
      ], 'public/js/app.js', 'resources/assets/js')
  
      // Create version
      .version(['css/app.css', 'css/style.css', 'js/app.js']);
  });
  </code></pre>
  
  <p>any help would be appreciated!</p>