Front-End Tooling with Gulp, Bower, and Yeoman
FREE
You can see this entire book for free.Click the table of contents to start reading.
The only book that covers front-end tools so comprehensively.
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 takes you straight to the bookdetailed 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
Appendixes
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.
