Jquery issue setting up Bootstrap SASS with gulp

Question

I am trying to setup a project that will compile my sass files using twitter bootstrap.

My project looks like this:

And my gulpfile looks like this:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var bootstrap = require('bootstrap-sass');
var jquery = require('jquery');

// config
var config = {
    sassInput: 'sass',
    sassOutput: 'public/css'
}

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src(config.sassInput + 'scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest(config.sassOutput));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['sass', 'watch']);

When I try to run "gulp" I get this error

Error: Bootstrap's JavaScript requires jQuery
    at Object.<anonymous> (G:\Project\node_modules\bootstrap-sass\assets\javascripts\bootstrap.js:8:9)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (G:\Project\gulpfile.js:7:17)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)

How do I provide a reference to jQuery from bootstrap? This is my first time using gulp and I am not sure what I should do.

Thanks.

Answer 1

There are two main approaches here:

• First is to load in bootstrap via plain css tag imports in the page. And then load your compiled sass file after that. But I can imagin that that is not what you want.

• Second is to load in the bootstrap path either by the include paths or load path. Examples:

example 1
    .pipe(sass({
        includePaths: [
            require("node-bourbon").includePaths,
            require("node-neat").includePaths[1],
            require("node-normalize-scss").includePaths,
            config.path.bower + config.path.fontAwesome
        ],
        importer: jsonImporter,
        outputStyle: config.sass.style
    }))

example 2
    .pipe(sass({
        style: 'compressed',
        loadPath: [
            './resources/sass',
            config.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
            config.bowerDir + '/fontawesome/scss',
        ]
    })


Your jquery error is just because you require the whole bootstrap npm package. At the top. That is not what you want I think.