Skip to content

Instantly share code, notes, and snippets.

@oranheim
Created October 20, 2018 12:43
Gulp with Bootstrap, Sass and browser sync
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', 'scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("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("js"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass'), function() {
browserSync.init({
server: "./"
});
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'scss/*.scss'], ['sass']);
gulp.watch("../resources/META-INF/views/*.html").on('change', browserSync.reload);
});
gulp.task('default', gulp.parallel('js', 'serve'));
@oranheim
Copy link
Author

oranheim commented Oct 20, 2018

The html templates are located under my Java project templates folder.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment