bootstrap-tutorial-gulp4-gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {

    browserSync.init({
        server: "./src"  
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
    gulp.watch("src/*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.parallel('js','serve'));

save the day~~!

thanks!

Hi,
Thanks for the code! Can you please explain how I can import selective JavaScript from Bootstrap in this set up and change the bootstrap.min.js? I'm talking about @import 'node_modules/bootstrap/scss/_dropdown.scss'; for example.
Regard & Thanks,
David

Dude, you rock, thanks a ton!

Muy bueno. Gracias amigo.

Thank you! After 48 hours of fumbling with this, this really made my day.

legend thank you very much

You deserve the world!!! Thank you, seriously! Freaking legend!

Muito bom, resolveu meu problema.

thank you

hero

Thanks! :D