In this section, we will go over a selection of development tools, which directly and indirectly relate to the average Grunt development workflow.
In this section, I will cover the tools of my own development environment, and the reasons why I think each is useful.
In my opinion, Mac OS X (http://gswg.io#osx) provides the optimal development environment. Mac OS X combines a Unix-based operating system with a brilliant user experience, allowing you to make use of the vast number of Unix-based development tools without having to worry about system level intricacies and incompatibilities. Homebrew (http://gswg.io#brew) is an OS X alternative to Linux's apt-get, providing a simple and easy-to-use method for installing command-line tools.
Windows is useful if you develop on the Microsoft stack (.NET, C#, and so on). However, Mac OS X is better suited to frontend development. Since, in addition to Unix developer tools, there are many powerful graphics and design tools. If Mac OS X were not available, my next choice would the popular flavor of Linux, Ubuntu.
Windows/Mac/Linux (http://gswg.io#sublime) for those who prefer the lighter weight of a text editor opposed to an Integrated Development Environment (IDE), Sublime Text is the perfect choice. Due to its vast extendibility, a simple package manager was made called Package Control (http://gswg.io#sublime-package-control). Useful packages include:
SublimeLinter—a multi-language static analyzer "linter", which displays code warnings inline as you typeCoffeeScript/Jade/Stylus/nginx—an array of plugins providing syntax highlighting for the respective languages
Windows/Mac (http://gswg.io#sourcetree)— a clean user interface for Git, providing a faster means to visualize the current state of your Git repositories. Also, these visualizations lower the learning curve for beginners by clearly conveying Git concepts like branching and merging. SourceTree also includes Git Flow integration. Git Flow helps to enforce Git best practice by guiding your Git workflow.
Windows/Mac/Linux (http://gswg.io#chrome-devtools)—Google Chrome's Developer Tools provides an extremely useful set of debugging, inspection, and performance analysis tools for all aspects of frontend development. There is also a Chrome DevTools extension called Grunt DevTools (http://gswg.io#grunt-devtools), which adds a "Grunt" tab inside Chrome DevTools, providing a user interface for Grunt.
In this short section, we will review two popular tools used by the frontend community.
JetBrains (http://gswg.io#webstorm), creators of IntelliJ and RubyMine, also have an IDE for Web development. Similar to Sublime Text, there is a package manager with many useful plugins available.
Yeoman is a scaffolding tool (http://gswg.io#yeoman) used to generate projects using the current industry best practice, and also a workflow that utilizes Grunt and Twitter's Bower. The large community uptake of this tool has yielded code generators for many frameworks. For instance, there are code generators for constructing directives in Angular, models in Backbone, Ember components, and much more.