Front-end Web Development Build Tools Syllabus

Build Tools syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Build Tools in Front-end Web Development, not a summary of it.

1. 1

   Package Managers

   2 topics

   • npm
   • yarn
2. 2

   Module Bundlers

   2 topics

   • Webpack
   • Parcel
3. 3

   Task Runners

   2 topics

   • Gulp
   • Grunt

Build Tools flashcards for Front-end Web Development

21 of 50 cards from the Build Tools deck — real questions with worked answers.

1. What is npm?

   npm (Node Package Manager) is the default package manager for Node.js. It installs, manages, and shares JavaScript packages, and uses a registry plus a CLI to handle project dependencies.

2. What file defines a project's dependencies and scripts in npm?

   package.json. It lists metadata, dependencies, devDependencies, and scripts that can be run with npm run.

3. What is the purpose of package-lock.json?

   It locks the exact resolved version of every dependency (and sub-dependency), ensuring deterministic, reproducible installs across machines.

4. In npm, what is the difference between dependencies and devDependencies?

   dependencies are packages needed at runtime in production; devDependencies are needed only during development/build (e.g. test runners, bundlers) and are omitted with npm install --production.

5. What command installs all dependencies listed in package.json?

   npm install (or npm i).

6. What does npm ci do and how does it differ from npm install?

   npm ci does a clean install strictly from package-lock.json: it deletes node_modules first, never updates the lock file, and fails if package.json and the lock file disagree. It is faster and used in CI/CD.

7. In semantic versioning, what do the three numbers in MAJOR.MINOR.PATCH represent?

   MAJOR = breaking/incompatible changes; MINOR = new backward-compatible features; PATCH = backward-compatible bug fixes.

8. What does the caret (^) version range mean in npm, e.g. ^1.2.3?

   It allows updates that do not change the leftmost non-zero digit — for ^1.2.3 it permits $\geq 1.2.3$ and $< 2.0.0$ (compatible minor and patch updates).

9. What does the tilde (~) version range mean in npm, e.g. ~1.2.3?

   It allows patch-level updates only — for ~1.2.3 it permits $\geq 1.2.3$ and $< 1.3.0$.

10. What does the --save-dev (or -D) flag do in npm install?

    It installs a package and records it under devDependencies in package.json.

11. What does the -g (global) flag do when installing an npm package?

    It installs the package globally on the system (available as a CLI command everywhere) rather than locally in the project's node_modules.

12. What is npx and what is it used for?

    npx is a tool bundled with npm that executes a package's binary without globally installing it — it runs the local or temporarily downloaded version of a CLI command.

13. How do you run a script defined in package.json's scripts field?

    npm run <script-name>. The special scripts start, test, stop, and restart can be run without the run keyword (e.g. npm start).

14. What is the node_modules folder?

    The directory where npm/yarn install all of a project's dependencies (and their transitive dependencies) locally for that project.

15. What npm command checks for known security vulnerabilities in dependencies?

    npm audit (and npm audit fix to automatically apply compatible fixes).

16. What is Yarn?

    Yarn is an alternative JavaScript package manager (originally by Facebook) created to address npm's early speed, determinism, and security shortcomings. It uses the same npm registry by default.

17. What lockfile does Yarn use?

    yarn.lock, which records exact dependency versions for deterministic installs (analogous to npm's package-lock.json).

18. What was a key original advantage of Yarn over early versions of npm?

    Parallel/concurrent installs (faster), a deterministic lockfile, offline caching, and integrity checksums for security.

19. In Yarn, what command adds a new dependency?

    yarn add <package> (use yarn add --dev <package> for a devDependency), as opposed to npm install <package>.

20. What is Yarn Plug'n'Play (PnP)?

    A Yarn (v2+/Berry) installation strategy that eliminates node_modules by mapping dependencies through a single lookup file, improving install speed and reliability.

21. What are Yarn/npm workspaces used for?

    Managing a monorepo: multiple packages within a single repository share one install, hoisting common dependencies and enabling cross-package linking.

See more Build Tools flashcards →

Planning Build Tools for Front-end Web Development

Build Tools (Front-end Web Development) FAQ