Skip to main content

Using Yeoman, Jenkins in Continuous Integration


Yeoman is a tool that will concatenate and minify your scripts, as well as, run JavaScript unit tests (JasmineBDD) inside a PhantomJS instance. It's fast and easy to integrate into your existing continuous integration process. At present, we have Jenkins as our work horse who will do the following upon each push to a specific development branch:
  1. Concatenate all JavaScripts based on a Gruntfile (GruntJS with NodeJS)
  2. Run JSHint on the concatenated JavaScript file (call this all.js)
  3. Minify the generated concatenated JS file (call this all.min.js)
  4. Run "yeoman test" to execute all the JavaScript specs against the concatenated JavaScript file
  5. This should fail the build process if any specs fail or if JSHint chokes
At this point, you could ship the assets over to CDN on Amazon CloudFront or Windows Azure Blob (CDN) to further reduce latency for your users.

Below is a shell script that can be easily modified to fit your needs:

 
 yeoman concat min --disable-insight --no-color  
 rm -rf src/test/build  
 cp -R src/main/MYAPP/public/javascripts src/test/build  
 yeoman test --disable-insight --no-color

Above, you'll see that we're removing the src/test/build directory, which is just a directory that contains all your JavaScript assets. In the next line, we copy over the application's JavaScript files to the src/test/build folder. One thing to note is that the src/test folder is actually where the Jasmine BDD Test Runner resides.

In trying to integrate Yeoman into your pipeline, you'll most likely hit this feature where it prompts the user to allow 'analytics for usage'. You can disable this prompt by adding the "--disable-insight" flag. The reason why you'd want to disable this feature is because it will cause builds to fail on Jenkins if it comes up.

Happy front-end development!
Labels:

Comments

Sindre Sorhus said…
Adding the environment variable `yeoman_test` will also prevent insight and the update notifier ;)
December 14, 2012 at 4:40 AM
Post a Comment

Popular posts from this blog

TextMate Tutorial: How to add a Strikethrough keybind to your Markdown bundle

Markdown is awesome for quickly generating Readme's on Github. After looking at other projects using the strike tag, I've decided to create a custom keybind for it in my TextMate Markdown bundle. Here's how:

1) Click the + sign on the bottom left and click New Command.
2) Paste this into the editbox and make sure you name your command "Strikethrough".

For the input field, select WORD in the drop down.
For the output field, select "insert as snippet".
As for the keybind, you can totally map it to whatever you're comfortable with but I chose Command-D as it is the same thing in Microsoft Word.

Cheers,
Jaime
Post a Comment
Read more

Plenty of Fish - Lessons Learned Meetup

Today, I had the fantastic opportunity of going to a retrospective by Plenty of Fish. As you may know, Plenty of Fish is the largest online dating site and it was all started by a local BCIT graduate named Markus Frind.





Below are notes that were taken on my iPhone. I do apologize as I am continually editing this blogpost.


What is Plenty of Fish? An online dating site.
Why enter the dating market? Back in 2003, it was the only thing that was interesting to build. Markus already knew ASP but wanted to learn more about building web applications with ASP.NET and improve his skills on his resume. 
How do you deal with the network effects problem? In the early days, Plenty of Fish gained traction through Vancouver and Toronto.  There wasn't any silver bullet or magic around it -- Plenty of Fish heavily relied on organic user growth and SEO. The focus was to retain users more than go out and acquire new ones.
What are some early challenges you faced? Markus actually ended up doing every…
Post a Comment
Read more

Using Git Hooks: Prepare Commit Message to automatically prepend branch names on commit messages

When you're practicing branch by feature with distributed version control, typically you'll get assigned a ticket or issue and that ends up being your feature branch. Instead of always typing in the branch name in every commit, you can edit your Git hooks (specifically prepare-commit-msg).

Assuming that this is a brand new git repository:

mv .git/hooks/prepare-commit-msg.sample .git/hooks/prepare-commit-msg
vi .git/hooks/prepare-commit-msg

Edit the file by commenting out what was originally in the file and then add this:



Now, whenever you make a commit, it should show up like this in the log:



Since GitHub and Bitbucket both support Emojis inside commit messages, you can do something cute like this



Want more emojis? check out the Emoji Mardown Cheatsheet!

Post a Comment
Read more