Front-End Tooling with Gulp, Bower, and Yeoman

Stefan Baumgartner

• Publisher: Manning Publications
• Year: 2016
• ISBN:
  9781617292743
• Topic: Design
• Subtopic: Webdesign

Front-End Tooling with Gulp, Bower, and Yeoman teaches you how to use and combine these popular tools to set up a customized development workflow from start to finish.

Part 1. A modern workflow for web applications

This first part is dedicated to front-end development workflows and tooling. In these chapters, you’ll learn about the daily challenges a front-end developer has to face, and will implement a workflow to overcome those challenges by using three tools.

Chapter 1 introduces the proposed workflow and details which types of tools are necessary to manage all the tasks ahead.

Chapter 2 starts with the first tool: the build tool, Gulp. With Gulp, you’ll set up automation for testing as well as compilation for JavaScript and CSS files.

Chapter 3 builds on the tasks from chapter 2 and organizes them in execution chains. Additionally, you’ll set up a live-reloading development server, which updates the build files to a full-fledged local development environment.

Chapter 4 introduces the second tool: the dependency-management tool, Bower. You’ll learn about components and dependency trees and will use Bower to keep third-party software at ease.

In Chapter 5, all the efforts from the previous chapters are combined and packaged with the third tool: the scaffolding tool, Yeoman. With Yeoman, you’ll be able to roll out development-ready project templates for your future projects.

Chapter 1. Tooling in a modern front-end workflow

This chapter covers

• Tedious and repetitive tasks of a front-end developer
• Scaffolding boilerplate code
• Dependency management
• Build tools and task runners
• A combined toolchain and workflow for front-end development

This is a great time to be a front-end developer. Browsers are more advanced than ever, and with the new technologies of the HTML5 era come numerous new possibilities. JavaScript isn’t a toy language anymore and is used for a large variety of applications. The fat client—running the majority of an application’s code directly in the browser, and thus the front end—is embraced and considered a good development strategy for web applications.

With JavaScript being taken seriously, developers face challenges in delivering the best possible code for their platforms—running authoring tools, bundling files, minifying applications, optimizing images...the list goes on. To meet all those expectations you need proper tooling.

In this chapter, we look at which non-coding tasks you have to tackle in your day-to-day workflow and how tools can help you as front-end developers. We divide those tasks into three categories and look at three tools to conquer them all:

• A build system, such as Gulp, allows you to run a multitude of file-transforming processes at the click of a button.
• A dependency manager, such as Bower, helps you keep an eye on versions of different libraries you use frequently, notifying you of conflicts and, in some cases, solving them on their own.
• A scaffolding tool, such as Yeoman, provides you with the essential project files to get things going. Yeoman allows you to create new applications and modules by entering a single command in your command prompt.

These three tools encompass the idea of front-end tooling: a set of software providing the necessary tools to get your application up, running, and deployed. In this book, you’ll learn how to set up these tools for you and your coworkers. You’ll dive deep into each of those technologies and see how they can be combined to create a tailored workflow for your needs.

1.1. A software developer’s workflow and task list

Taking a look at the typical software development workflow, you can easily identify three phases developers go through when coding (see figure 1.1):

Figure 1.1. The three phases of development workflow

• Initializing— In any software development process, this is the starting point. It’s where you set up your project or add new files to an existing project.
• Development— This is the phase where you write code. Should you need more modules or want to refactor some code into a new file, you have to go back to the initializing phase. If everything is well, you move on to the next phase.
• Deployment— Your code is ready. It’s time to create an executable bundle and deploy it. For web development, this means deploying HTML, JavaScript, and CSS to your web server. From there you can return to the development phase (fixing bugs or adding new features to existing code) or to the initialization phase (creating new modules).

Although every software development process has those phases in common, the tasks a developer performs during those phases differ from technology to technology. Also, the most tedious of those tasks are those that are not directly related to the coding part but are mostly concerned with setup, structure, and optimized output. Figure 1.2 shows typical tasks for a JavaScript project.

Figure 1.2. Tasks for each development phase

The initializing phase has to do with setting up folders and applying boilerplate code. You also download and add third-party libraries. Development is about authoring tools like preprocessors (LESS) or JavaScript tools. Many tasks are done in the deployment phase.

Figure 1.2 depicts numerous tasks, and we’ll explore them in detail in the following section. Don’t feel overwhelmed by the numbers of duties you’ll face on the next few pages. You’re here to find a pleasant and easy solution for them via automation. To see what you’re dealing with, let’s examine those tasks in detail.

1.1.1. Initialization phase tasks

During initialization, the tasks aren’t necessarily JavaScript-specific but are more generic to be suitable for any programming language. To get things started, you create a project structure and the first files to start coding.

Set up a known and reliable project structure

Based on your experience with other projects, you know how you like to structure your code and your files. You’ll most likely use the same structure in the next project, maybe with some little improvements here and there. If you’re familiar with the way your folders and files are organized, you’ll easily find your way through the territory of your new project.

Apply reusable patterns/boilerplate code

Boilerplate code is code that can be included in a project with little or no alteration. As a developer you’re just filling in the blanks. Boilerplate code not only saves you time in writing code, it also ensures that certain often-used, standard code is included and in the right place. Boilerplate code prevents you from starting with a blank page and helps you get started more easily.

Install third-party software/libraries

Libraries like jQuery provide you with basic functionality and a good framework on which to set your projects. We often call those libraries dependencies, which means that an application’s successful execution depends on using those libraries.

1.1.2. Development phase tasks

Entering the development phase, the scope of your tasks gets more specific toward front-end and JavaScript development.

Use code-authoring tools

One trend that hit front-end development pretty hard in recent years was the many ways of code authoring. Instead of writing with the native languages of the web (JavaScript, CSS, and HTML)...