Front-End Tooling with Gulp, Bower, and Yeoman
Stefan Baumgartner
  • November 2016
  • ISBN 9781617292743
  • 240 pages
  • printed in black & white

The only book that covers front-end tools so comprehensively.

Palak Mathur, Capital One

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.

Table of Contents detailed table of contents

Part 1: A Modern Workflow for Web Applications

1. Tooling in a modern front end workflow

1.1. A software developer's workflow and task list

1.1.1. Initialization phase tasks

1.1.2. Development phase tasks

1.1.3. Deployment phase tasks

1.1.4. The human factor

1.2. JavaScript tools and a new workflow

1.2.1. Three types of code and their tools

1.2.2. Node.js for JavaScript tools

1.3. Scaffolding with Yeoman

1.3.1. The benefits of a Yeoman as a scaffolding tool

1.3.2. The concept behind generators

1.4. Dependency management with Bower

1.4.1. The benefits of Bower

1.4.2. Bower’s dependency tree

1.5. Gulp, the streaming build system

1.5.1. The benefits of Gulp

1.5.2. Build pipelines

1.6. Summary

2. Getting started with Gulp

2.1. Setting up Gulp

2.1.1. The building blocks of Gulp

2.1.2. The Gulp Command Line Interface

2.1.3. The local Gulp installation

2.2. Creating Gulpfiles

2.2.1. A Gulp "Hello World" task

2.2.2. Dealing with streams

2.2.3. Readable and writeable streams with Gulp

2.3. Handling tasks with Gulp plugins

2.3.1. Transforming data

2.3.2. Changing the file structure

2.3.3. Chaining plugins

2.4. Summary

3. A Gulp setup for local development

3.1. The local development environment

3.1.1. Grouping the tasks

3.1.2. The Reset step: A clean task

3.1.3. Build and iteration

3.2. The initial build step

3.2.1. Dependency and execution chains

3.2.2. Serial and parallel task execution

3.2.3. Task execution functions for dependency chains

3.2.4. Updates to our Gulpfile

3.3. The iteration step

3.3.1. Watch processes

3.3.2. Using Browsersync for an on-demand server with live reload

3.3.3. Updates to our Gulpfile

3.4. Summary

4. Dependency management with Bower

4.1. Dependency management basics

4.1.1. Components and dependencies

4.1.2. Dependency trees

4.2. Flat dependency tree management with Bower

4.2.1. Installation and update of a component

4.2.2. Installation of components with dependencies

4.2.3. Resolving dependency conflicts

4.3. Integration with Gulp

4.3.1. Wiring up dependencies to our application files with Gulp

4.3.2. Including dependencies in our build chain with Gulp

4.4. Summary

5. Scaffolding with Yeoman

5.1. Yeoman generators

5.1.1. Parts of a generator

5.1.2. Calling generators

5.2. Project templates

5.2.1. Fixed parts

5.2.2. Flexible parts

5.2.3. Optional parts

5.2.4. Restorable parts

5.3. Yeoman's assembly line

5.3.1. Prompting

5.3.2. Writing

5.3.3. Installing

5.4. Creating a generator

5.4.1. Preparing the project template

5.4.2. Providing the assembly instructions

5.4.3. Bundling and testing

5.5. Summary

Part 2: Integrating and Extending our Platform

6. Gulp for different environments

6.1. Incremental builds and build caches

6.1.1. Gulp's built-in functionality

6.1.2. Installing a build cache

6.1.3. Handling file deletions

6.2. Debugging original files through sourcemaps

6.2.1. What are sourcemaps

6.2.2. Built-in sourcemaps in Gulp

6.2.3. The sourcemaps plugin

6.3. Environment specific switches

6.3.1. The noop() task

6.3.2. dev() and prod() selection functions

6.3.3. Parsing command-line arguments

6.4. Summary

7. Working with streams

7.1. Handling different input types

7.1.1. Passthrough streams

7.1.2. Merge streams

7.2. Handling variations in output

7.2.1. Parameterized streams on a task level

7.2.2. Stream arrays

7.3. Additional streaming techniques

7.3.1. Avoiding repetition with stream snippets

7.3.2. Handling flow with stream queues

7.3.3. Changing stream contents with Gulp filters

7.4. Summary

8. Extending Gulp

8.1. The Gulp plugin Blacklist

8.1.1. Verdict: Not a Gulp plugin

8.1.2. Verdict: Use something else instead

8.1.3. Verdict: Does too much.

8.2. Integrating other stream-based tools

8.2.1. Streams, buffers and Vinyl file objects

8.2.2. Integrating Browserify

8.2.3. Transforming contents

8.3. Integrate Promise-based tools

8.3.1. How Promises work

8.3.2. Promises in the Gulp task system

8.4. Summary

9. Creating modules and Bower components

9.1. Asynchronous module definition

9.1.1. AMD—module definitions for the browser

9.1.2. Refactoring to AMD

9.2. CommonJS and Universal Module Definition

9.2.1. CommonJS modules

9.2.2. Universal Module Definition

9.3. Defining and deploying Bower components

9.3.1. Bower.json specification

9.3.2. Deploying and registering components

9.3.3. Private registries and components

9.4. Summary

10. Advanced Yeoman generators

10.1. Adding new files to existing projects

10.1.1. The concept of sub-generators

10.1.2. Assembly instructions for a sub-generator

10.2. Improving the interface

10.2.1. Editing existing files

10.2.2. Dealing with user configurations

10.3. Composing generators

10.3.1. Generator composition with global generators

10.3.2. Generator composition with dependencies

10.4. Summary


Appendix A: Introduction to Node.js

A.1. Meet Node.js

A.1.1. Node.js installation

A.1.2. The Node.js ecosystem

A.2. Global and local node modules via NPM

A.2.1. Global versus local installation

A.2.2. An example of global installation: LESS

A.2.3. An example of local installation: Autoprefixer

A.2.4. Temporarily replacing the global installation with a local one

A.3. Distribution and versioning of modules

A.3.1. The contents of a package.json file

A.3.2. NPM version handling

A.3.3. Creating modules and publishing

A.4. Summary

About the Technology

In large web dev projects, productivity is all about workflow. Great workflow requires tools like Gulp, Bower, and Yeoman that can help you automate the design-build-deploy pipeline. Together, the Yeoman scaffolding tool, Bower dependency manager, and Gulp automation build system radically shorten the time it takes to release web applications.

About the book

Front-End Tooling with Gulp, Bower, and Yeoman teaches you how to set up an automated development workflow. You'll start by understanding the big picture of the development process. Then, using patterns and examples, this in-depth book guides you through building a product delivery pipeline using Gulp, Bower, and Yeoman. When you're done, you'll have an intimate understanding of the web development process and the skills you need to create a powerful, customized workflow using these best-of-breed tools.

What's inside

  • Mastering web dev workflow patterns
  • Automating the product delivery pipeline
  • Creating custom workflows

About the reader

This book is suitable for front-end developers with JavaScript experience.

About the author

Stefan Baumgartner has led front-end teams working across a wide range of development styles and application domains.

  • combo $44.99 pBook + eBook
  • eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks

Provides enough detail for you to move from novice to expert in no time!

Jason Gretz, Auto-Owners Insurance

This book completes the front-end development toolset you need.

Unnikrishnan Kumar, Thomson Reuters

With this definitive book, Stefan has written the most sensible and practical guide to building front-end apps that exists today.

Nick A. Watts, American Chemical Society