Including bootstrap js with gulp causing errors

Question

I have successfully got all my scss including bootstraps to combine into one minified file using gulp. Now I am trying to do the same with my js and bootstraps. The problem is that uglify keeps throwing errors at me like Unexpected token: name ($) etc. And won't minify / compile bootstrap js because of this. Now I'm starting to believe I am going the wrong way about this.

This is my file structure:

app/js(my.js files in here)/vendor/bootstrap/js/src/(boostrap js files here)

As you can see, what I have done is just copy the bootstrap js files into my files in the hope that they would be minified / compiled along with mine. But with the scss I imported the files like you usually do. So am I doing this the wrong way?

here's my gulp.js code

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglify');
var gulpSequence = require('gulp-sequence');
var autoPrefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var csslint = require('gulp-csslint');
var htmlReporter = require('gulp-csslint-report');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');

//plumber error 
var onError = function (err) {
  console.log(err);
};

//create sourcemaps, convert scss to css, lint check, minify and prefix
gulp.task('css', function(){
    return gulp.src('app/scss/**/*.scss')
        .pipe(plumber({
          errorHandler: onError
        }))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(csslint())
        .pipe(htmlReporter())
        .pipe(cleanCss())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(autoPrefixer({
            browsers: ['last 3 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'))
});


//create sourcemaps, lint check, compile into one file, minify
gulp.task('js', function() {
  return gulp.src('app/js/**/*.js')
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(sourcemaps.init())
    .pipe(jshint())
    .pipe(jshint.reporter('gulp-jshint-html-reporter', {
        filename: __dirname + '/jshint-output.html',
        createMissingFolders : false  
    }))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/js'))
});                                                                            

//copy php files to app
gulp.task('phpCopy', function(){
    return gulp.src('app/*.php')
        .pipe(plumber({
          errorHandler: onError
        }))
        .pipe(gulp.dest('dist'));
});

//functions to run on file save
gulp.task('watch', function(){
    gulp.watch('app/scss/**/*.scss', ['css']);
    gulp.watch('app/*.php', ['phpCopy']);
    gulp.watch('app/js/**/*.js', ['js']);
});

gulp.task('default', ['css', 'js', 'phpCopy']);

Answer 1

To any body struggling with this here is what I did to fix this problem.

//create sourcemaps, lint check, compile into one file, minify
gulp.task('js', function() {
  return gulp.src([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'app/js/**/*.js'
    ])
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(sourcemaps.init())
    .pipe(jshint())
    .pipe(jshint.reporter('gulp-jshint-html-reporter', {
        filename: __dirname + '/jshint-output.html',
        createMissingFolders : false  
    }))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/js'))
});

I had to point to the bootstrap file inside node_modules instead of copying them into my files. Here's a tutorial that helped me http://george.webb.uno/posts/gulp-and-npm-for-front-end-web-development

And if you copy this code be aware that sourcemaps isn't working properly yet. I will continue to work on this.