Intro to Front-end Build Tools

Intro to Front-end Build Tools

Lessons

Preprocessing, Build tools, Version Control, and Content Management Systems

Front-end web development is mainly focused on three core client-side technologies, HTML, CSS and JavaScript. Each plays an important role during the final output/rendering of web sites and web pages. During the web development process, there are many other technologies, build tools, and workflows that are used by front-end web developers to help make the process easier, more manageable, flexible, scalable, more efficient, and more powerful. Many developers set up custom local development environments that include build tools and complex workflows across multiple projects. One of the many challenges faced by front-end developers is how does one keep up with the rapidly changing workflows, tools, technologies, and techniques used in the industry? There are multiple different ways to create the front-end of a website and the best practices are often times debated as new practices emerge and change frequently.

Watch a Video Lesson

Outcomes:

  • Learn how to set up a custom front-end development environment and workflow

Front-end Web Development Related Keywords & Concepts

  • Separation of Content and Presentation (Style)
  • Scalability & Modularization
  • Automation
  • Abstraction & Compiling
  • Collaboration

Front-end Build Tools & Technologies:

  • Version Control systems (e.g. Git, Github)
  • Pre-Processors (e.g. SASS)
  • Package Managers (e.g. Node.js, npm)
  • Task Managers (e.g. Gulp)
  • Content Management Systems (e.g. WordPress)
  • Static Site Generators (e.g. Jekyll, Eleventy, Astro)
  • Frontend Javascript Frameworks (e.g. React, Vue, Svelte)

A Basic Example Workflow:

Using GitHub, GitHub Pages, & Prepros

  1. Setup a GitHub repo for your project (for version control)
  2. Setup your repo for GitHub pages (for free static hosting and auto-deployment)
  3. Clone your repo locally
  4. Use Prepros to locally manage and build your site using various build tools such as a css pre-processor (SASS for variables, partials, etc.) and any other build tools/plugins desired (e.g. auto image optimization, templating, minifying, etc).
  5. When finished working locally, commit/push your code to your GitHub repo to save, backup, and deploy your site.

A More Advanced Example Workflow:

Using GitHub, NPM, 11ty, & Netlify

  1. Setup a GitHub repo for your project (for version control)
  2. Link your GitHub repo to Netlify (for fast static CDN web hosting and auto-deployment)
  3. Clone your repo locally
  4. Use npm install to setup a local development environment and a CLI workflow to create, manage, and build your site using a static site generator (SSG) such as Eleventy (11ty) or Astro that is capable of helping to automate the build process (e.g. compile Markdown, HAML, or SASS, etc., render HTML from various decoupled data sources, separate reusable code (DRY) and combine them via imports/includes and layout templates, auto optimize images, minify distribution files for production, etc).
  5. When finished working locally, commit/push your code to your GitHub repo that will trigger a webhook to auto deploy your site to Netlify.

Front-end Related Reading & Resources

Lesson-related: