Bootstrap-sass javascript inside gulpfile.js

Question

I have an angular app with a gulpfile.js file where my sass/css files are minified. The app did not use bootstrap previously. But because of new requirements, I have to incorporate bootstrap-sass it.

In the gulpfile.js, I was able to add the script to do the following:

gulp.task('styles', function() {
    return gulp.src(["src/main.scss", "src/styles/**/_*.scss", "src/components/**/_*.scss"])
        .pipe(sass({
            outputStyle: 'compressed',
            includePaths: [config.bowerDir + '/bootstrap-sass/assets/stylesheets']
        }))  
        .pipe(plugins.sass({ outputStyle: 'expanded' }))
        .pipe(plugins.minifyCss())      
        .pipe(gulp.dest('dist/styles'));
});

The above worked in letting me use the bootstrap classes. But I have not been able to use the navbar button in its collapsed state because of the difficulty of incorporating jquery and javascript into the gulpfile (i assume)...

gulp.task('js', function() {
    return gulp.src([
        config.bowerDir + '/jquery/dist/jquery.js/jquery.min.js',
        config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.js/bootstrap.min.js',
        './src/*.js',
    ])
        .pipe(uglify('app.js', {
            compress: false,
            outSourceMap: true,
        }))
        .pipe(gulp.dest(config.bowerDir + '/js'));
});

What could be wrong with the above that clicking on the navbar button in responsive mode does not open the navbar menu?

Answer 1

You have a small typo in your path:

It's '/bootstrap-sass/assets/javascripts/bootstrap/bootstrap.min.js'

not: '/bootstrap-sass/assets/javascripts/bootstrap.js/bootstrap.min.js'