Chapter 1. Tooling in a modern front-end workflow
Figure 1.1. The three phases of development workflow
Figure 1.2. Tasks for each development phase
Figure 1.3. The tasks categorized in types of code
Figure 1.4. How the three tools act with your project
Figure 1.5. The parts of the Node.js ecosystem
Figure 1.6. Yeoman takes predefined templates from a generator and integrates additional data based on user input. The adapted templates will be added to an existing project or—depending on the generator—will result in an entirely new project.
Figure 1.7. Bower as a package manager calls the repository and checks for availability of this package. It compares installed dependencies and will update them if needed or let the user know if there’s an issue. If everything is okay, those components will be downloaded and added to the project.
Figure 1.8. The two kinds of dependency trees: a deep dependency tree, which installs each dependency again, and a flat one, in which a dependency is installed just once
Figure 1.9. Gulp, as a build tool, triggers other tools that transform your source files into distributable files. The commands needed for those builds are stored in a build file. Gulp, in particular, takes input files, runs them through different commands (or tools), and saves the results in a new folder.