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.
