Using gulp/elixir to mix, minify & version css & stylesheet result in $ is not defined error

I have been using laravel for a while and I have been meaning to learn how the asset management works in laravel - so I gave it a go today and having some trouble already.

All my "css" are placed in public/css/ and "javascripts" in public/js/ dir, which looks likes this:

using the gulpfile.js - I've configured my elixir mixes like this:

var elixir = require('laravel-elixir');

elixir(function(mix) {

    // Mix all css files
    mix.stylesIn('public/css');

    // Mix all the javascript files
    mix.scriptsIn('public/js');

    // Version combined & minified assets
    mix.version([
        'public/css/all.css',
        'public/js/all.js'
    ]);

});

I then ran this command: gulp --production

Which gave the following output:

Then I updated my footer.blade.php (which previously were pointing to individual js files) with the following:

When I refreshed the site, the page is broken and I am getting this error in javascript console: $ is not defined error

Any idea why this isn't working? Am I doing something wrong?

via Chebli Mohamed