我Browserify模塊之一是不承認其他

Question

var gulp = require('gulp'), 
 
    order = require('gulp-order'), 
 
    sass = require('gulp-ruby-sass'), 
 
    autoprefixer = require('gulp-autoprefixer'), 
 
    concat = require('gulp-concat'), 
 
    jshint = require('gulp-jshint'), 
 
    notify = require('gulp-notify'), 
 
    uncss = require('gulp-uncss'), 
 
    purify = require('gulp-purifycss'), 
 
    sourcemaps = require('gulp-sourcemaps'), 
 
    browserSync = require('browser-sync').create(), 
 

 
    browserify = require('browserify'), 
 
    source = require('vinyl-source-stream'), 
 
    streamify = require('gulp-streamify'), 
 

 

 
    paths = { 
 
     HTML: 'app/*.html', 
 
     SCSS: 'app/_scss/main.scss', 
 
     JS: 'app/_js/*.js', 
 
     tsHTML: 'app/REPSuite/web/static/', 
 
     tsCSS: 'app/REPSuite/web/static/css/modules/', 
 
     tsJS: 'app/REPSuite/web/static/js/', 
 
}; 
 

 
/* 
 
gulp.task('browserify', function() { 
 
    return browserify('./app/_js/main') 
 
     .bundle() 
 
     //Pass desired output filename to vinyl-source-stream 
 
     .pipe(source('main.js')) 
 
     // Start piping stream to tasks! 
 
     .pipe(gulp.dest('./app/REPSuite/web/static/js/')); 
 
}); 
 
*/ 
 

 
gulp.task('scripts', function() { 
 
    return browserify('./app/_js/main') 
 
     .bundle() 
 
     .pipe(jshint.reporter('fail')) 
 
//  .pipe(concat('main.js')) 
 
     .pipe(source('main.js')) 
 
     .pipe(streamify(sourcemaps.init())) 
 
     .pipe(streamify(sourcemaps.write('.'))) 
 
     .pipe(gulp.dest(paths.tsJS)) 
 
     //.pipe(streamify(uglify())) 
 
     //.pipe(gulp.dest(paths.tsJS)) 
 
     .pipe(notify({ 
 
      message: 'Scripts task complete' 
 
     })); 
 
}); 
 

 
gulp.task('copy-html', function() { 
 
    gulp.src('./app/index.html') 
 
     // Perform minification tasks, etc here 
 
     .pipe(gulp.dest('./app/REPSuite/web/static')); 
 
}); 
 

 
gulp.task('uncss', function() { 
 
    gulp.src('app/REPSuite/web/static/css/main.css') 
 
     .pipe(uncss({ 
 
      html: ['./app/index.html'] 
 
     })) 
 
     .pipe(gulp.dest('./out')); 
 
}); 
 

 
gulp.task('purify-css', function() { 
 
    return gulp.src('app/REPSuite/web/static/css/main.css') 
 
    .pipe(purify(['./app/_js/*.js', './app/index.html'])) 
 
    .pipe(gulp.dest('./dist/')); 
 
}); 
 

 
gulp.task('styles', function() { 
 
    return sass('app/_scss/main.scss', {sourcemap: true, style:'expanded'}) 
 
     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
 
     .on('error', function(err) { 
 
      console.error('Error!', err.message); 
 
     }) 
 
     .pipe(sourcemaps.write()) 
 
     .pipe(gulp.dest(paths.tsCSS)) 
 
     .pipe(browserSync.stream()) 
 
     .pipe(notify({ 
 
      message: 'Styles task complete' 
 
     })); 
 
}); 
 

 

 
gulp.task('js-watch', ['scripts'], browserSync.reload); 
 

 
gulp.task('serve', ['styles', 'scripts'], function() { 
 

 
    browserSync.init({ 
 
     server: "./app" 
 
    }); 
 
    gulp.watch('app/_scss/main.scss', ['styles']); 
 
    gulp.watch('app/_js/*.js', ['js-watch']); 
 
    gulp.watch(paths.HTML).on('change', browserSync.reload); 
 
}); 
 

 

 
gulp.task('default', ['serve']);

我使用gulp與browserify和我加載jquery就好了，但是我加載取決於jquery圖書館和我得到一個Uncaught ReferenceError: jQuery is not defined

這是我main.js文件：

var $ = require('jquery'); 
    mixitup = require('./../bower_components/mixitup/build/jquery.mixitup.min.js'); 

奇怪的是在我的輸出文件中我可以看到jQuery庫！ 我錯過了什麼？

Answer 1

這是使用的語法，解決了錯誤：

var $ = jQuery = require('jquery'); 
var mixitup = require('./../bower_components/mixitup/build/jquery.mixitup.min.js');