Lesson Monday

For now, there are two ways to include custom CSS in your project.

The first is to have links to both your custom stylesheet and to Bootstrap (via Bootstrap’s CDN) in your index.html file. This is perfectly fine, especially since you probably only have one stylesheet and Bootstrap to deal with.

However, it’s also a helpful learning experience to write a task that will concatenate CSS for you. Here’s how to do that:

gulp.task("cssBuild", function() {
  gulp.src(['css/*.css'])
  .pipe(concat('vendor.css'))
  .pipe(gulp.dest('./build/css'))
});

Let’s walk through what this task does, since it uses several of Gulp’s most common functions.

.src() takes an array of arguments. This will include all of the files that we want to perform our task on. Here, we want to perform our task on all .css files inside of a folder called css. (We could name our folder something different, but then we’d have to modify the array. For instance, we could do ['styles/*.css’].) This folder should include any custom stylesheets you have plus Bootstrap's CSS file.

Once we’ve gathered our source files, we want to concatenate them. (Remember, we require concat with the following line: var concat = require('gulp-concat’).)

We use .pipe to chain actions together. First we want to gather the files, then we want to concat them all into a file called vendor.css. In general, we use .pipe to chain together plugin actions, whether that's concatenating, minifying, or another action.

Where should our concatenated CSS file go? It needs a destination folder, which is what .dest() is for. Here, we specify that the destination file should be ./build/css.

You can run this task by doing the following in the command line: gulp cssBuild. If you want to combine it with other tasks (so it runs with gulp build), you’ll need to change your dependency arrays. If you have the time, try doing that on your own.

Now you can update your index.html file to link to just one stylesheet:

<link href="build/css/vendor.css" rel="stylesheet" type="text/css">

Let's do a quick Gulp recap to simplify our knowledge of how a gulpfile works. If you take a closer look at your gulpfile, you’ll realize that there are really only a few gulp methods:

  • task()
  • src()
  • dest()
  • start()

Because start() is deprecated, that leaves only three regularly used Gulp methods in our file. In fact, those are all of Gulp's methods in a nutshell. Once you understand these three methods, know how to chain commands together with .pipe(), and understand how dependency arrays work, you’ll be well on the way to understanding Gulp!