Jquery library not working after gulp bundle

问题:

I am quite a newbie for gulp but i am trying to implement it in my this project. But looks like somewhere i mashup. I order the js files and was trying to get the bundle. But looks like jquery lib or something is not working.

Here is my gulpfile.js code:

'use strict';


// include all necessary plugins in gulp file
var gulp                = require('gulp');
var order               = require('gulp-order');
var concat              = require('gulp-concat');
var sass                = require('gulp-sass');
var sourcemaps          = require('gulp-sourcemaps');
var uglify              = require('gulp-uglify');
var rename              = require('gulp-rename');
var imagemin            = require('gulp-imagemin');
var cache               = require('gulp-cache');

// Task defined for java scripts bundling and minifying

gulp.task('scripts', function() {
    return gulp.src('assets/src/js/*.js')    
    .pipe(order([
        "assets/src/js/jquery-3.2.1.slim.min.js",
        "assets/src/popper.min.js",
        "assets/src/js/bootstrap.min.js",
        "assets/src/js/morphext.min.js",
        "assets/src/js/pushy.min.js",
        "assets/src/quote.js"
        ], { base: './' })) 
      .pipe(concat('bundle.js'))
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
      .pipe(gulp.dest('assets/dist/js'));
});

// Task define for compliling scss file    
// Currently i am not using this complier 
gulp.task('sass', function() {
    return gulp.src('assets/src/css/**/*.scss', {style: 'compressed'})
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.init())  // Process the original sources
        .pipe(sass())
        .pipe(sourcemaps.write()) // Add the map to modified source.
        .pipe(gulp.dest('assets/dist/css/'));
});

// Define task to optimize images in project
gulp.task('images', function() {
    return gulp.src('assets/src/img/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
    .pipe(gulp.dest('assets/dist//img'));
});

// Task watch
gulp.task('watch', function() {
      // Watch .js files
      gulp.watch('assets/src/js/*.js', ['scripts']);

      // Watch .scss files
      gulp.watch('assets/src/css/*.scss', ['sass']);

      // Watch image files
      gulp.watch('assets/src/img/**/*', ['images']);
});


// declaring final task and command tasker
// just hit the command "gulp" it will run the following tasks...
gulp.task('default', ['scripts', 'images' , 'watch']);

回答1:

I got solution for this problem, here is my new code for gulp.js!

'use strict';

// include all necessary plugins in gulp file

var gulp                = require('gulp');
var concat              = require('gulp-concat');
var sass                = require('gulp-sass');
var sourcemaps          = require('gulp-sourcemaps');
var uglify              = require('gulp-uglify');
var rename              = require('gulp-rename');
var imagemin            = require('gulp-imagemin');
var cache               = require('gulp-cache');

// Task defined for java scripts bundling and minifying

gulp.task('scripts', function() {
        return gulp.src
            ([
            'assets/src/js/jquery/*.js', 
            'assets/src/js/vendor/*.js', 
            'assets/src/js/plugins/*.js',
            'assets/src/js/custom/*.js',
            ])

        .pipe(concat('bundle.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('assets/dist/js/'));
});

// Task define for compliling scss file

gulp.task('sass', function() {
         return gulp.src('assets/src/scss/**/*.scss', {style: 'compressed'})
        .pipe(rename({suffix: 'custom'}))
        .pipe(sourcemaps.init())  // Process the original sources
        .pipe(sass())
        .pipe(sourcemaps.write()) // Add the map to modified source.
        .pipe(gulp.dest('assets/dist/css/unminified/'));
});

// Define task to optimize images in project

gulp.task('images', function() {
    return gulp.src('assets/src/img/**/*')
    .pipe(cache(imagemin({ optimizationLevel:5, progressive: true, interlaced: true })))
    .pipe(gulp.dest('assets/dist/img'));
});

// Task watch

gulp.task('watch', function() {
      // Watch .js files
      gulp.watch('assets/src/js/*.js', ['scripts']);
       // Watch .scss files
      gulp.watch('assets/src/scss/*.scss', ['sass']);
       // Watch image files
      gulp.watch('assets/src/img/**/*', ['images']);
});

// declaring final task and command tasker

// just hit the command "gulp" it will run the following tasks...

gulp.task('default', ['scripts', 'images' , 'sass' , 'watch']);