Spring-Boot: Building Bootstrap with Gulp and Gradle

Bootstrap is one of my favorite CSS frameworks. I've used it in many of my Java projects. One problem I've often ran into is how to include Bootstrap in your project.

I've seen it done in quite a few ways. The most popular are. Added as a static library or importing it via webjars.

To me both these options miss out on the best part of bootstrap. It's not about the CSS but about the LESS/SASS that compiles into bootstrap's CSS. This makes it so simple and quick to customize.

Getting Started

We'll start with a simple spring-boot web application. I have a pre-made simple boot app on git hub: https://github.com/brookslyrette/spring-boot-demo-starter. You can use this as a starting point. First download the code or clone the git repo git clone https://github.com/brookslyrette/spring-boot-demo-starter.git

How it all works

We are going to make bootstrap a first class member of our spring-boot projects build. We will use gulp to build a customized version of bootstrap.

Building

First we will add node and gulp to our gradle build. This will give us the tools we need to build bootstrap. There is already a great plugin for this: https://github.com/srs/gradle-gulp-plugin . Configuration is pretty simple. Just add the plugin and configure when it runs in the build. You can see my comments on what does what in the gist below.

You how have to to add a packages.json file. This will install all the node packages our gulp build chain will use. You can use npm to create this file via npm init. You can just hit return or enter values for all the questions npm will ask. Now you should have a packages.json file that looks something like this.

We will be building from the SASS bootstrap sources. We can install this using: npm install --save bootstrap-sass. You'll see packages.json now contains this dependency. We will also install gulp-sass with npm install --save gulp-sass

The SASS file

We should now add a SASS file that will contain our own styles and bootstrap customizations. We will add this file under src/main/sass and call it global.scss. We can leave this blank for now.

gulpfile.js

Our gulpfile will let us do two things. First it will have a build task that gets called by gradle. Second a watch task that lets us run gulp and have any changes we make instantly compiled into our CSS files.

Now we have everything in place! You can run this empty build with gradle bootRun. You'll see the project now creates and copies css into src/main/resources/static to be used in your project.

Using and Customizing

Bootstrap has a great theme demo page. I've made it thymeleaf compatible so we can test our customized theme. You can just cut and paste this into home.html

Lets launch with grable bootRun and see how it all looks.

Well that's not too pretty. How about we open up global.scss and pull in bootstrap. All we need to do is add the import into the file.

Now when we rerun the app we see a much prettier picture.

Now we can customize some of the styles. Bootstrap has a variable for everything. Lets tweak the navbar's color and some of the buttons.

Be sure to add all customizations before the bootstrap import. Here is my custom theme for this post.

Now the demo page looks like.

Any customization is now just a line or two of SASS away.

You can download the completed project here: https://github.com/brookslyrette/sass-gradle-gulp