Tag Archives: yeoman

Yeoman grunt-ngmin to grunt-ng-annotate save massive time on your grunt build.

Background

If you have build your skeleton app from yeoman using the angularjs-generator and you created it before August 3rd 2014  you are running ngmin task.

Ngmin has been deprecated and you are told this every time you do an npm install on the project.

Git Issue that resolves this for new generated projects from yeoman

https://github.com/yeoman/generator-angular/issues/801

Why to migrate.

ng-min is deprecated so it is no longer supported.

ng-min is slow.  For a mature medium-sized angularjs app ng-min was taking 50 seconds of the build time.  Running with ng-annotate instead it now takes only 2 seconds to do the same thing.

Now the uglify task takes the most time of the build at 8 seconds against the 2 seconds needed for the ngannotate task.

A savings of 48 seconds a build.  

Built Machine spec:

OSX 10.9.5 with 3.2 GHz with 24 GB of ram.  No modifications have been made to the memory settings for grunt or node.

Continue reading

Grunt Proxy setup for Yeoman 1.2

Purpose

I was wanting to keep my front end project separate from my backend.  This meant that the back end was on a different port than the yeoman server.  This causes cross site scripting issues with the yeoman server.  I figured out the only way around this was via a proxy.

I found this article from Mike Partridge from Jan 2014 which was a good starting point but the yeoman build has changed so this is no longer working.

http://www.hierax.org/2014/01/grunt-proxy-setup-for-yeoman.html

Tools used

  • grunt-cli v0.1.13

  • grunt v0.4.5

  • yeoman 1.2.0

  • grunt-connect-proxy 0.1.10

  • angular-generator 0.9.1

Change to instructions

The only change to the directions in the post from hierax is the following.   I just changed the things that are pushed into middleware.  Live reload no longer has a base [ ] block.

Step 3 should now look like:

livereload: {
 options: {
 open: true,
 middleware: function (connect) {
   // Setup the proxy
   var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

   middlewares.push(connect.static('.tmp'));

   middlewares.push(connect().use(
     '/bower_components',
     connect.static('./bower_components')
   ));
   middlewares.push(connect.static(appConfig.app));

   return middlewares;
 }
 }
 },

Yoman and installed generators not showing os x

I recently tried to install the ember generator for yeoman. I have been using the angularjs one for a while now and updating it as new versions became available.

I had installed the ember generator on the command line from npm

npm -g install generator-ember

I had yo on the command line. But when I ran this I would never see the ember generator.

yo --help

I tried cleaning the cache to ensure it was not a corrupted install from somewhere else.

npm -g cache clean
npm -g update

None of this worked so I had to go and remove yeoman completely and reinstall it

First I found the yeoman instance

which yo

Gave me /usr/local/bin/yo

ls -la /usr/local/bin/yo

Which returns that it is installed.

/usr/local/bin/yo -> ../lib/node_modules/yo/cli.js

I tried uninstalling from the npm

npm -g uninstall yo

The command completed successfully but I could still find yo on the file system.

ls /usr/local/share/npm/bin/yo

Only thing I could do at this stage is delete the yeoman as it was not removed by the npm uninstall command.  That means deleting the whole npm install in /lib/node_modules/ and the symbolic link to it in the /bin folder.

sudo rm -rf /usr/local/share/npm/lib/node_modules/yo
sudo rm  /usr/local/share/npm/bin/yo

and install it properly again.

npm -g install yo

and the next time I ran yeoman I saw my generators

yo --help
.....
Ember
  ember:app
  ember:component
  ember:controller
  ember:model
  ember:router
  ember:view

Twitter Bootstrap grid system with Yeoman, Angular, and IE8

Versions Used

Bootstrap 3.1.1

Yeoman angular-generator 0.8

Problem

I ran into this testing the IE8 rendering of the twitter bootstrap and the grid system with my angularjs app generated by yeoman.

What getbootstrap.com has

On the bootstrap site they have a block that checks your version of IE and if it is below IE9 then includes respondJs.

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- [if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

Include respond in your project

Install in project

bower install respond -S

Include in the html via grunt

grunt bowerInstall

Move include from the  block to a if IE is less than IE 9

<!--[if lt IE 9]><script src="bower_components/respond/dest/respond.src.js"></script><!--<![endif]-->

Notes

You will have to remove the respond from your index.html <!–bower:js> if you rerun the following

grunt bowerInstall

Yeoman migration to 1.0 and grunt with coffeescript

With migrating to yeoman 1.0 from version 0.9.6 you have to essentially create a new project and import your source over as the builds have changed so much.  Check the documentation from yeoman on how to do the upgrade.

https://github.com/yeoman/yeoman/wiki/Migrate-from-0.9.6-to-1.0

I have an Angularjs project with coffeescript that I wanted to have compile to individual js files. There are lots of good examples on how grunt works with coffeescript from the source https://github.com/roytruelove/angular-grunt-coffeescript

Purpose of compiling coffeescript this way.

This will create 1 js file per coffee file and have them sit next to the original source coffeescript file.  This is not what you want to release to production as there are a lot of network requests per page.

Continue reading