I did a trial for [WebStorm 6][webstorm] a week and a half ago and immediately fell in love with it after playing with it for a couple days.
I purchased a license for it right away during the trial period. The main feature that sold me to the IDE was the fact that it has components
and workflow to work with modern JavaScript frameworks such as [jQuery][jQuery], [Modernizr][modernizr], etc. For instance, you can have several
JavaScript frameworks and have it reusable across multiple projects. By setting a library to “global”, it makes it available for
auto completion for all projects (meaning every project will automatically inherit it). Beforehand, I use [Notepad++][nplus] and
[Web Matrix 2][webmatrix] as an alternative to [Visual Studio][vs] for fast web development debugging and code writing. I never really cared much
about code completion (slows me down sometimes) but it helps for accessing third-party libraries. [WebStorm][webstorm] is a very light IDE but
yet still powerful — not to mention, it also supports multiple version control repositories such as Git, Mercurial, among many others.
[WebStorm 6][webstorm] has a little bit of [Resharper][resharper] flavor on it having used [Visual Studio][vs] for a few years now.
In addition, it’s also packed with many features to target modern web development workflows such as testing, support for
dynamic languages such as [LESS][less], [SASS][sass], [CoffeeScript][cs], [TypeScript][ts], etc. Similar to [Visual Studio][vs], there’s
predefined project templates when creating new projects (HTML5 boilerplates) as a starting point which generates boiler plate code that uses
HTML5 boilerplates project. With this idea in mind, it inspired me to look at [Yeoman][yo] once again and make it part of my web development
workflow.
[Yeoman][yo] is basically a scaffolding tool that works with [Grunt][grunt] and [Bower][bower] to complete a modern web development
work flow (ie brings in configuration to make your application work nicely with [Grunt][grunt] and [Bower][bower]). [Bower][bower] is
a dependency management tool similar to [Node Package Management or NPM][npm] which automatically pulls the library as well as its dependencies.
[Grunt][grunt] on the other hand is a test runner, build tool (generates a deployment folder which contains a production ready version of your
application), and a whole lot of automation types of tasks. [Grunt][grunt] and [Bower][bower] are powerful tools in their own rights and does
a lot more things that I mentioned above but [Yeoman][yo] sorta brings them together. Playing with these three tools for a few days,
I’ve come up with steps/commands to accomplish certain steps. I’ll provide a list of commands that I have put together meant as a sticky note
so I can reference them over and over again easily.
As a side note, the commands used are in Windows OS and command line (either the default command line or Node.js command prompt
works good). If you don’t have [NodeJS][node] installed on your system already, you can check out the website and need to have it installed. It will
include [NPM][npm] which is an indispensable tool and is very popular in the open source community.
#### To install the tools:
Install Yeoman.
\> npm install yo -g // The -g attribute installs the component globally
Install Bower.
\> npm install bower -g
Installing Grunt according to their documentation requires a few steps. When working with a new project, you can execute the following
commands.
\> npm uninstall grunt -g // Only if you have Grunt previously installed
\> npm install grunt-cli -g
For existing projects that already has package.json and Gruntfile.json (task configurations, plugins, etc):
\> npm install grunt –save-dev
#### Yeoman commands:
To scaffold a new generic app.
\> yo webapp
To list all the Yeoman generators.
\> npm search yeoman-generator
Once you find a generator that you want to install, you can install it via NPM by
\> npm install -g generator-angular // Angular JS for example.
\> npm install -g generator-backbone generator-backbone-amd // Backbone JS
You can then scaffold a new project using the generator. (You have to do CD to and be at the root of your project directory).
\> yo angular
#### Bower commands:
Bower is similar to NPM where it manages libraries and dependencies as packages that can be installed globally or per project
based.
To install a library such as angular.
\> bower install angular // Gets the latest version
To install a specific version of a library.
\> bower install angular\#1.1 // This will install a specific version
To install from a GitHub repo.
\> bower install git://github.com/components/jquery.git // Installs from GitHub
To update a package.
\> bower update angular
To list all installed packages.
\> bower list
To search the Bower repository for specific packages.
\> bower search [name]
#### Grunt commands:
Grunt can do a lot of things such as starting up a web server for testing, running test, executing tasks, etc.
To perform a project build and compiles a project for deployment (JS minification, CSS minification, etc).
\> grunt –force // The force parameter ignores warning and will continue the build.
To perform a test
\> grunt test
To run a server instance
\> grunt server
The commands above are the most common usage of the [Yeoman][yo], [Bower][bower] and [Grunt][grunt]. There’s a lot
more things that weren’t covered but for starters, this should be a good base line when trying to make these tools
part of your web development work flow.
[node]: http://nodejs.org/
[npm]: https://npmjs.org/
[yo]: http://yeoman.io/
[grunt]: http://gruntjs.com/
[bower]: https://github.com/bower/bower
[modernizr]: http://modernizr.com
[jQuery]: http://www.jquery.com
[webstorm]: http://www.jetbrains.com/webstorm/
[vs]: http://www.microsoft.com/visualstudio/
[resharper]: http://www.jetbrains.com/resharper/
[sass]: http://sass-lang.com/
[less]: http://lesscss.org/
[cs]: http://coffeescript.org/
[ts]: http://www.typescriptlang.org/
[backbone]: http://backbonejs.org/
[underscore]: http://underscorejs.org/
[webmatrix]: http://www.microsoft.com/web/webmatrix/
[nplus]: http://notepad-plus-plus.org/