-1 

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']);

我正在使用带有browserify的gulp并且我加载jquery得很好，但是我正在加载一个依赖于jquery并且我得到一个库Uncaught ReferenceError: jQuery is not defined

这是我的main.js文件：

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

奇怪的是在我的输出文件中我可以看到 jQuery 库！我错过了什么？

在此处输入图像描述

4

1 回答 1

0

这是解决错误的语法：

var $ = jQuery = require('jquery');
var mixitup = require('./../bower_components/mixitup/build/jquery.mixitup.min.js');
于 2015-09-23T11:16:06.647 回答