你和你的团队是否在使用风格指南？你的模块是否有文档？如果否，别慌张。在本教程中，我将告诉你如何才能改进你和你团队的协作方式。我们将一起探索Brad Frost和Dave Olsen所提倡的概念：使用“模式实验室”（Pattern Lab）来创建风格指南，用Gulp来处理资源。我们开始吧。
要想了解更多Gulp基础，你可以看看Kezz Bracey的初学者指南《Web设计命令行：用Gulp实现自动化》（The Command Line for Web Design: Automation with Gulp）。
- 原子 atoms
- 分子 molecules
- 有机体 organisms
- 模板 templates
- 页面 pages
Atoms can’t be broken down into smaller pieces.
These are the simplest blocks, including fundamental tags like lists, colors, fonts, animations etc.
Molecules are groups of different elements (atoms) which function together like a unit.
For example, a teaser with a headline, an image, paragraph and a link like “Read more”. Each of these is a single element, but together they become a molecule; part of a larger, more complex system.
Organisms are groups of elements (atoms and molecules) and work like a section on your website.
Think, for example, of a website header. It’s a larger system, built from molecules such as a search form and navigation, both of which are in turn built of smaller atoms.
patternlab header organism
Pattern Lab header organism, seen on small screen
Check out the online UI demos and get a feeling for the whole system.
Now it’s time to combine both these systems and create a workflow for your team. Pattern Lab will give us our HTML and deliver the simple UI, Gulp will handle all the assets we need.
- Sass-Compiling (Libsass)
- Server (Browser-Sync)
- Releasing / Deployment
- Bump up the version
- Push files and tags to endpoint
- Push files via rsync to a server
To use Gulp you’ll first need to have node.js on your system. If you don’t, take a look at Kezz Bracey’s The Command Line for Web Design: Taming 3rd Party Packages for setup instructions.
Let’s start by installing Gulp.js globally. In the terminal, type:
npm install gulp -g
Now we need to clone the repository of Patternlab to give us a base to work from.
git clone email@example.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:
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.
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.
With things setup, we can now start adding various tasks to help us in our development!
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.
We specify the files for the watcher and trigger the tasks which we need in the event of a change.
Writing gulp in the shell triggers the default task. But before Gulp starts this, it triggers the clean:before task to clean all the public files.
Let’s create a task to develop at the styleguide, but without minifying assets. This triggers browser-sync, builds all assets and starts the watcher.
For this step we’re going to need a few new plugins.
The plugin gulp-bump is to update the version number.
gulp-filter will give us a specific file of the stream.
gulp-git allows us to use git statements in gulp.
And gulp-tag-version is for generating the tag.
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.
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.
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:
Now we need our configfile to set the various paths. This file is necessary to maintain the paths and configuration of the project:
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.