Task Runners

What is a task?

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

🤔

Tasks in Frontend

Minifying JS and CSS files

Optimizing Static Images

Compiling TypeScript to JavaScript

Compiling CSS Pre-processors (SASS) to CSS

 

What is a task runner?

Task Runners in Frontend

  • grunt
  • gulp
  • module bundlers: (webpack, rollup, parcel)
  • custom npm scripts

Example

  • We want to compile pug to HTML
  • We want to compile SASS to CSS
  • We want to have auto-reload enabled

Gulp Demo

Webpack Demo

Parcel Demo

Minification

Made with Slides.com