Combining Pattern Lab with Gulp for Improved Workflow

Do you and your team work with styleguides? Do you have documentation for your modules? If not, don’t panic. In this tutorial I’ll show you how it’s possible to improve the way you work with your team. We’ll explore concepts suggested by Brad Frost and Dave Olsen, using Pattern Lab to create styleguides, with Gulp to handle the assets. Let’s begin!

What is Gulp?

Gulp.js is a streaming build system and a task runner. The important concept is that you have streams where you define a lot of stuff for your files. It’s faster than managing things manually, saving your nerves and a lot of time. For example, in this tutorial we’ll put all our Sass-files in a pipe (a process):

Now we need to clone the repository of Patternlab to give us a base to work from.

git clone git@github.com:pattern-lab/patternlab-php.git

Next we need a gulp file to setup our tasks. Create a gulpfile.js in the root of your project folder. After that we need a config-file, where we define all the paths, so create a build.config.json in your folder.

The following files are needed too:

.bowerrc

package.json

bower.json

After all these basic steps, we have the basic project structure. Now let’s start to build the tasks for our workflow.

Start With the Gulpfile

At the top of our gulpfile.js file, we require each dependency. If you install a plugin, you must “require” it and give it a name.

Start with gulp and our configfile for all paths and configuration.

var gulp = require('gulp'),
config = require('./build.config.json');

During our development process we won’t need to be minifying our code (that’s a waste of time unless we’re ready to deploy). With the following production variable we can toggle some tasks on and off. You will see this in action later on.

Task 1: Clean all Assets

If you delete an image from the folder “source/”, you’ll find there’s a copy of the image in “public/” too. Because of this duplication we’ll perform a simple step to clean the image folder in “public/”.

For deployment purposes it’s important to have just one file with all scripts. To achieve this we’ll use the plugin gulp-concat and combine all our scripts to produce application.js. If the variable production is true, then application.js will be uglified and get a new name: application.min.js.

Now you define the gulp-task release, set the variable production to true (now we need to minify) and open the stream. You must take all files with a version number, use the plugin bump and make it possible to define the type (patch, minor or major) via a parameter in the shell.

If you execute the release-task without a type then gulp-bump will take a patch - x.x.1. After this you push the files to the root and commit the changes. Now it’s time to generate a new tag for the project. The file package.json is needed to get the current version number for the new tag.

Finally, we push all files and tags to the origin and in the branch which we want.

Task 11: Deployment

It’s possible to deploy all the files to a server via rsync; doing so is super fast and comfortable. Type gulp deploy in your terminal and after a few seconds you have the local project at the server. You don’t need to drag and drop folders manually. Automate all the things. You define the host and the path of the folder, which you want to deploy in build.config.js.

Final Gulpfile

You’ve written so much code, and here is the final result! You may prefer to have a separate file for each task, in which case you’re welcome to split it up. In this case, for the sake of simplicity, we’ll display everything in a single Gulpfile:

Conclusion

I love working with a combination of Gulp and Pattern Lab. I’ve worked in different teams and set this foundation for each project. Feedback by each team member has always been positive because of its easy-to-follow process. Everybody have a solid surface, can pick the module and use it with ease. For questions or feedback please see the comments section below.