Intro to

Front-End Build Tools

Make
Shit
Happen

Tasks

  • Compiler
  • Prefixer
  • Minifier
  • Concatenator
  • Linter

  • Uglifier

  • File Watcher
  • Server
  • Package Manager
  • Dependency Manager
  • Scaffold Generator
  • etc.

Yeoman

Yeoman is an open source scaffolding tool. Yeoman runs as a command-line interface combining several functions, such as generating a starter template, managing dependencies, running unit tests, providing a local development server, and optimizing production code for deployment.

Bower

Bower is an open-sourced package manager built on Node.js and npm. It tracks your packages in a single json file, takes care of dependencies, and stores the packages in a single flat directory. Bower runs as a CLI and provides hooks to integrate it into other tools and workflows.

npm

npm is the default package manager for the Node.js environment. Like Bower, it tracks your packages in a single json file, takes care of dependencies, and stores the packages in a single flat directory. npm also has the ability to run scripts, install global packages, and  publish your own packages.

Broccoli

Broccoli is an asset pipeline with a CLI utility and a configuration file using Javascript. It is a more traditional build tool handling source file conversion into distributable files for development or production environments.

Grunt

Grunt is a Javascript task runner focusing on configuration over code. Like Broccoli, it automates repetitive tasks like minification, compilation, unit testing, and linting. These tasks are handled by Grunt plugins which are installed by npm and configured in a single file.

Gulp

Gulp is a Javascript task runner focusing on code over configuration. Like Grunt, it relies on plugins which are also installed by npm and configured in a single file. Gulp shows it's difference with it's use of streams and pipelines, which simplify the process and speed it up.

Koala

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation only. Koala can run in Windows, Linux and Mac. It's also free and open sourced.

Prepros

Prepros is a GUI application for compiling SASS, LESS, and other languages with CSS prefixing built in. It has a built-in server for browser testing. It runs on all three operating systems, but is not free.

CodeKit

CodeKit is the current standard for GUI build tools. It handles compiling, dependency management, and browser reloading all through an easy-to-setup interface. But, it's not open sourced and only available for Macs.

Make

Gnu Make is an old-school UNIX utility that gives you access to the world of Bash. Using a single file, you can use bash scripting to control the files like all the other task runners but without the overhead of all the wrapper plugins. You can go right to the source.

Questions?

Go
Build
Something

Intro to Front-End Build Tools

By zach fedor

Intro to Front-End Build Tools

An overview of build tools, task runners, and package managers.

  • 891
Loading comments...

More from zach fedor