gulp browserify shim and jquery depended

Question

I am using gulp to build my scripts, and Im trying to "shim" jquery 1.11 to my js script so it could use it, my current codes:

SimpleScript:

var $ = require('jquery')(window);

var SimpleScript = {

    init: function(){

        console.log('xxx');

    }
}

$(document).ready(function() {
    SimpleScript.init()
});

module.exports = SimpleScript;

skeleton.js:

var $ = require('jquery')(window);
var areaMng = require('./SimpleScript.js');

Gulfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var browserify = require('gulp-browserify');
var rename = require('gulp-rename');
var gzip = require('gulp-gzip');

gulp.task('js', function() {
    gulp.src('app/assets/scripts/skeleton.js')
        .pipe(browserify({
            shim: {
                jquery: {
                    path: 'public/js/jquery.min.js',
                    exports: '$'
                }
            }
        }))
        .pipe(gulp.dest('public/js'));

});

All of this runs great and smooth... BUT I get an error that $ is not defined in the --> SimpleScript.init() that calls --> console.log('xxx');

and of course when I try to access jquery in the chrome console with --> "$" it is not defined

* notes - the file that gets created has jquery 1.11 inside it, I can see it. - I tried referencing as jquery, jQuery and $ all the same.

Answer 1

Solved it!!

because I installed jquery, so the file import in shim with same name "jquery" is not good.

this is how it should be:

SimpleScript:

var $ = require('jQuery');

var SimpleScript = {

    init: function(){

        console.log('xxx');

    }
}

$(document).ready(function() {
    SimpleScript.init()
});

module.exports = SimpleScript;

Gulfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var browserify = require('gulp-browserify');
var rename = require('gulp-rename');
var gzip = require('gulp-gzip');

gulp.task('js', function() {
    gulp.src('app/assets/scripts/skeleton.js')
        .pipe(browserify({
            shim: {
                jQuery: {
                    path: 'public/js/jquery.min.js',
                    exports: '$'
                }
            }
        }))
        .pipe(gulp.dest('public/js'));

});