Setting up Gulp, Bower, Bootstrap Sass, & FontAwesome

Let’s face it. Managing front end dependencies is still a headache. As developers, we have a plethora of options for building dependencies. Some of the tools off the top of my head are Grunt, Gulp, Broccoli, Component, NPM, and probably 5 more have been released since I started writing this post. In this tutorial, I am going to focus on Gulp but I’m sure it can be modified to work with any of the others.

Lately I’ve started a few side projects and wanted to quickly build out a MVP, minimal viable product, and Bootstrap paired with FontAwesome is a great way of doing this. The problem comes in with trying to automate the setup and have a nice clean package. Sure you can use a CDN but that limits your ability to modify variables and makes working offline difficult. By setting up Gulp we have all the sources available to modify and extend as we need.

Tonight after integrating these for the fourth time I thought it would be something good to share with the goal of benefiting others. From this point forward I will assume you have both bower and npm installed. If you do not then just do a little searching for installation instructions for your operating system. Neither should be too difficult.

Bower

The first step is to setup Bower. Create a new local directory and “cd” into it. Next run bower init and following the instructions. I don’t believe any of the answers to the questions matter as this will only be used locally.

I find by doing this it keeps the rest of the file simpler. The sassPath is the folder where I store the sass files I create. I’m using Laravel 5.0 and as you can see I just put them in resources/sass. These will end up being parsed and put in a ./public directory. Next is the bowerDir which is just the path to the bower_components.

This task is a little complex but shouldn’t be to0 difficult to follow. The important parts of this task is the loadPath which tells gulp-ruby-sass all the locations it should look for files. The .on(“error” uses the notify plugin to alert something failed in the build.

With this setup our main style.scss can import bootstrap and fontawesome easily. Here is an example:

I imported a new font and set it as bootstraps $font-family-base. When bootstrap is later pulled in it will see the variable is defined and use our setting. You can also do this for any bootstrap variables.

Watch and Default Task

Finally, we are almost finished. Now we need a watch task and a default task.

The first is the watch task which just listens for changes in the path and then runs the “css” task. Finally, we have a default task which when called runs bower, icons, and the css task. This is useful so contributors can pull down your code, cd into it, run npm install, and finally gulp. Everything should be easily shared and used.

If you would like to see the final files used for this tutorial take a look at this demo repo. Also, if you have any questions or if anything isn’t clear let me know in the comments.

Great post! Really enjoy seeing how other developers setup their build systems. Always end up learning a few new things! Really like your config idea for file paths. That definitely will help keep code a little neater!

If you’re curious, check out this post over at Viget (http://viget.com/extend/gulp-browserify-starter-faq) regarding using Gulp & Browserify. It was also insightful to me and cool to learn how to split each task into little task files to help modularize it all a bit more 🙂

and came across your post while googling around. Like you, I used bower to add the bootstrap-sass assets. But I don’t get any output when running gulp sass. If I point gulp.src to one of my own scss files, it works just fine. Any ideas?

OK, so I figured it out. Turns out you can’t reference files with leading underscores in gulp, so the workaround is to create a custom scss file, import the bootstrap file (sans underscore, even though its in the file name), run gulp against your custom file, and everything is running again. whew.

Thanks. Where I can add my custom CSS files? I have compiled the all SASS from bootstrap into public/css/style.css but I want add more files inside style.css..I mean that I want compile with gulp SASS another css/sass out of bower_components folder

Good article! I am doing something similar but I am not using Bower to manage/install Bootstrap. Instead, I downloaded Bootstrap Sass directly from the website and added the bootstrap folder to my src/scss folder.

I am having issues with the mixins. When I create a new file called _layout.scss and include the following code:

section {
@include make-row();

article {
@include make-lg-column(2);
}
}

Unfortunately, this doesn’t seem to be working as expected. The output is: