Out of the Box Example of Angular + Protractor

Want an out of the box example of a real-live, easy to use, well documented way to use Protractor on a running Angular project? Want it to run right off github?

Then navigate over to https://github.com/mbcooper/ProtractorExample.

5 easy steps after you clone the repo and you can watch Protractor launch and run a real Angular project!!!

Gulp or Grunt - Why Do We Angularians Need It? Which One Should You Use?

Gulp, grunt, whatever. Why do you need it at all? gee, it's hard enough to learn AngularJS; why do I need to learn a task runner language?? (in case you didn't already know what they were).
Gosh, there was no need for a task runner in Visual Studio or Eclipse, so why do you need one for Angular? Well, the answer to that question is 2 part:

1. The build and deploy workflow for C# is built into Visual Studio.  You became spoiled ... but you could not customize it easily.
2. JavaScript deployment was relatively trivial and applied to a few elements on many HTML pages.  Subsequently, tools like minification (of JavaScript on each page), and LESS to CSS translation, were all that was needed.

With AngularJS, there are typically many many more files that support the application, and these are typically deployed to one HTML page. There will be files for models, for services, for controllers, and templates and directives. Further, we typically store our jasmine spec files in the same folders.
Loading each file individually would be slow, and of course, we don't want to expose our Intellectual Property, so we'd like the files minified and obfuscated (ugilfied in the JS world).  And as we deploy to different locations, we'd like to lint our code and automate that deployment and build.
Hmm... sounds like what Visual Studio does for us in C#? It takes all our files that comprise the application, including dependencies, excluding certain files, and "compiles" them and packs them into nice little .dll files.

Trust me .. javascript workflow management requires a programmable task runner ... preferably with instructions in our language of choice:  JavaScript of course! (No XML hell like the java / ms boys have).

So let's look at Gulp vs Grunt -- the leading choices for task automation.

Grunt

Grunt  was the original task runner.. It' is based heavily on configuration and convention, and it operates synchronously. I've been using it for a few years, and have been constantly frustrated by the configuration approach it presents.

Gulp

Gulp is the new kid on the block.  It is based on the concept of piping data flows, and is asynchronous.  (It also has no pictures of hogs on its website).

I'm moving all my scripts to Gulp, as it is more in-line with the thinking process of a developer. I was tripped up a bit on its async nature, where I started tasks before the data was there.

Comparing Gulp to Grunt

Let's look at a few real-life examples of some tasks in either, so you can see the differences.
Let's take a look at setting up a simple lint task:

Grunt - Linting

Gulp- Linting

Hmm.. what's the benefit of Gulp? Looks like the same.  Other than the Gulp pattern is input, process, output (which make sense), there is no real advantage for singleton tasks.  In fact, the ability to use the ":" to use alternate configs is quite cool in Grunt.

The power of Gulp really shines when we create a series of tasks. Gulp's pipes run data in memory, so it is much faster. Also, we can multi-task. We can run our long running tasks like linting or karma suites parallel with other tasks.  Gulp feels more natural, as you don't have to keep referring back to config sections to figure out what the heck it does.


So let's look at some a real-life series of tasks that you might have in a build. We'll lint, convert less to css, run our test suite, copy our js and css files to a build directory and build our index.html to include all our new files. (These are abbreviate versions. You can check out my Gulp work in progress here.

Grunt- Build

Gulp - Build

Notice I use runSequence, which allows me to ensure items run in a certain order. But since I run group in async mode, this completes in less than 1/2 the time as the grunt stack.

For more

Hopefully this give you an idea of the differences.  I've placed a work-in-progress of my Gulp file in a Gist here.  Check it out.