eggs-genny

An EGGS-ellent Yeoman GENNY-erator for building modern web apps.

Creates a template project after asking a few dependency-related questions.

In case you don't know what Yeoman is, it's essentially like builds you out a "template" project or project skeleton. It's fucking dope, saves you a shit load of time, and there are literally a bunch of prebuilt ones. You can also write your own, obviously, which is how EggsGenny was born.

##Installation/Setup

####Step 1: Install Yeoman.

npm install -g yo

You should have Bower and Grunt, and if you don't then run this:

npm install --global yo bower grunt-cli

####Step 2: Install the greatest Yeoman genny known to man (step off, generator-angular!):

npm install -g generator-eggs-genny

####Step 3: cd into your little rag-tag project and run:

yo eggs-genny

####Step 4: Answer some questions about the following dependencies:

• jQuery
• Angular
• GSAP
• Bootstrap (only the CSS, fuck their goofy JS components)

####Step 5 (for some users): eggs-genny attempts to do an npm install of the necessary dependencies. Depending on how permissions are configured on your system, you may also need to run it with sudo after doing step 4:

sudo npm install

####Step 6: Develop like Dave, or as I call it, Davelop. Pretty bitchin', isn't it?

##Build System

By default, eggs-genny uses Gulp as a task-runner (porting it to Grunt soon!). Here's a rundown of the essential tasks it has:

#####Supported browsers

There is a variable at the top of the Gulpfile called supportedBrowsers which is how you can set which browsers Autoprefixer will add vendor prefixes to support. By default it goes back to like the stone age:

  supportedBrowsers = [ 'last 4 versions', '> 0.5%', 'ie 7', 'ff 3', 'Firefox ESR', 'Android 2.1' ];

...which of course you can reset to whatever you like. Read more on Autoprefixer and the various browser strings over here.

#####Default

gulp OR gulp default

By simply running gulp, you will get a watch on all the main dev files under the app. Any saved LESS files will compile to CSS. A livereload will be triggered on the change of any of these files (for CSS this is after it is compiled from LESS).

#####Build

gulp build

This is the 'build' or 'distribution' or 'production' or whatever you want to call it. This guy does a bunch of work to build you out a lean and clean app:

• starts by compiling all the LESS files
• then concats the CSS, autoprefixes it, before finally combing it for stupid mistakes and then minifying it
• then moves onto the JS by (if your using Angular in your project) prepping your code for minification using ng-annotate, concating all js files into one and then uglifying them
• copy over any assets or partials (and make them validation-friendly if using Angular)
• copy over main index.html file, while replacing the many links to external JS/CSS files with just the one for the JS file and one for the CSS files that were just created
• perform a cleanup by deleting the tmp/ directory used to build the files

#####Utilities Yeah, there's two 'utility' functions. One is a hilarious error message and the other just logs stuff in a more visible way. These will one day be npm modules too and will then just get required in so as to keep the gulpfile.js clean.

You can fully remove all instances of these if you want, they are non-essential.

Created by Dave Lunny in the beautiful year 2015.