Bootstrap with Less workflow – revisited

Believe it or not, it’s been more than a year since I wrote the first Bootstrap with Less workflow article.
That workflow served us great on a lot of the projects over the past year, but as all things, over time – things have evolved.

In this article, I will walk you through the changes we made to it and the reasons behind them.

Before I even start, I encourage you to read the first Bootstrap with Less workflow article, if you haven’t already done so. The ‘new’ workflow shares the same logic as the ‘old’ one, so to avoid repeating myself, it would be a good idea for you to get acquainted with it.

Without reading the first article, this one won’t make much sense.

Folder structure

“public” folder and its contents remain the same.

However, there are a few small changes in the ‘source’ folder.
Both ‘less’ and ‘js’ folder contain a ‘vendor’ folder which then houses ‘bootstrap’ folder with corresponding Bootstrap .less and .js files.
‘vendor’ folder is also a home to other plugins (‘js’ > ‘vendor’) and their styles (‘less’ > ‘vendor’).

‘vendor’ folders were added for better organisation.

Here is a screenshot of the folder and file structure for one of our projects so you can get a better idea of what I’m talking about.

‘js’ folder also contains scripts.js and vendors.js files.

scripts.js gets compiled to scripts.js and scripts.min.js in the ‘public/js’ folder.

vendors.js includes (using gulp-include – more about that later) all JavaScript plugins and gets combiled to vendors.js and vendors.min.js in the ‘public/js’ folder.

.less files have the same function as before. Only the @import file paths in style.less are updated since the ‘bootstrap’ folder has been moved inside the ‘vendor’ folder.

Compiling files

In the screenshot showing the folder structure you can see a few files and folders that you may not be familiar with, such as: ‘gulpconfig.json’ and ‘gulpfile.js’ (among others).

So if you haven’t figured out already, we choose Gulp to do the heavy lifting for us.

We ditched CodeKit cause it’s a Mac only app (some of our developers use Windows machines) and sharing its config files, while multiple people are working on the same project, isn’t very practical.

A colleague of mine (Ivo) wrote a Gulp intro article. Be sure to check it out. It will teach you how to set up Gulp, install packages and Gulp plugins, and write Gulp tasks which process and compile your .less and .js files.

Here is a list of packages and Gulp plugins we use:

The names of the packages and plugins are self explanatory, so there is no need to go into more detail. If you want to know more on how to implement them in your Gulp tasks be sure to browse throught their documentation.

Bootstrap with Less workflow – the final word

No workflow is perfect. It evolves over time and with each new project. In this past year, here at Slicejack, we probably reiterated our Bootstrap with Less workflow at least 10 times. This is where Gulps flexibility comes into play. It can adapt to various project scenarios and needs. You can use your core packages and plugins across all of your projects, and if the situation requires, add new ones to extend the functionalities.

Experiment with your development workflow and see what best suits you and your team. Don’t be afraid to experiment and be sure to have fun while doing it.