Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Yeogurt Generator

Jake Larson
February 20, 2014

Introduction to Yeogurt Generator

A Yeoman generator that creates a sensible structure for static sites and single page applications by using your favorite tools.

Jake Larson

February 20, 2014

More Decks by Jake Larson

Other Decks in Technology


  1. Scaffolding generator for modern front-end development

    View Slide

  2. Underlying Technologies
    Allow user to make
    choices on how to
    generate their folder
    structure and desired
    packages, tasks, and
    Runs automated tasks
    such as: minifying code,
    concatenating files,
    preprocessors, lint
    code, run unit and
    functional tests, and
    much more.
    Package manager for
    front end libraries,
    plugins, and code in
    general. Helps with
    version management,
    dependencies, and file

    View Slide

  3. Generator Options
    • Project/Site naming

    • Static Site or Single Page Application

    • CSS Preprocessing with LESS or Sass

    • Modular JavaScript with RequireJS or

    • IE8+ Support via HTML5shiv and

    • JavaScript Linting with JSHint

    • Default ignores for Git or SVN

    • Build deployment to FTP server

    • Bootstrap 3.x or Foundation 5.x

    • Font Awesome 4.x

    View Slide

  4. Generator Options (cont.)
    • Jade or Swig templating.

    • Can drop down to regular HTML if need be

    Static Site
    • Built off of Backbone MV* Library

    • Jade, Handlebars, or Lo-dash (Underscore)

    • Can also use Facebook’s React view framework

    Single Page Applications

    View Slide

  5. Default Features
    • Template inspiration from HTML5 Boilerplate

    • Feature detection with Modernizr

    • Built in preview server with LiveReload

    • .editorconfig for consistent coding styles within text

    • JavaScript unit testing with Mocha + Chai or Jasmine
    • Karma used for running tests within browsers and

    • Automatic build process that includes
    concatenation, image optimization, CSS and HTML
    minification, and JS uglification.

    • Dynamic Dashboard - auto-generated dashboard
    for your site

    • Dynamic Styleguide - auto-generated styleguide
    using KSS (Knyle Style Sheets)

    • Dynamic JavaScript API - auto-generated API
    documentation through Docker using JSDoc and
    • Sourcemaps for both JavaScript and Sass/LESS

    View Slide

  6. Grunt Tasks
    grunt server
    Starts up a development server that watches for
    local file changes and automatically reloads them to
    the browser.

    grunt test
    Runs JSHint and Mocha to lint and unit test
    JavaScript, respectively.

    grunt build
    Builds out an optimised site through minification of
    CSS and HTML, as well as uglification and
    optimisation(RequireJS) of Javascript.

    grunt zip
    Runs grunt build and compresses the entire site to
    a ZIP file

    grunt deploy
    Runs grunt zip and pushes both production-ready
    files and zip file to a specified FTP server

    View Slide

  7. Views Structure
    • 3 categories
    • Components

    • Templates

    • Pages

    • Helps stay as ‘DRY’ as possible (Don’t
    Repeat Yourself)
    • Maximizes reusability of markup
    • Harnesses the power of Jade/Swig
    • Variables

    • Mixins

    • Blocks

    • Markup extensions (via ‘extend’)
    ├── views

    │ ├── components

    │ │ ├── all-components

    │ │ ├── heading

    │ └── templates

    │ ├── base

    | index

    View Slide

  8. Page Structure
    Templates Pages

    View Slide

  9. Dynamic Dashboard
    • Built dynamically through
    comments in development files

    • Lists out all categories you

    • Works with Jade, Swig, and

    • Allow for status changes out of
    the box (Status key)

    • Saves you from manual updates
    for client-facing work

    • Responsive Design

    View Slide

  10. Sourcemaps
    • Sourcemaps created when using
    either Sass or LESS as well as all

    • Allow Firefox and Chrome Dev
    tools to map back from minified/
    compiled files to their original

    • Gives the ability to network map
    files loaded in the browser down
    to development files on your file
    system. (Chrome only)

    View Slide


    View Slide