generator-yeogurt

A Yeoman generator for creating a sensible structure to front-end work using your favorite tools.

npm install generator-yeogurt
76 downloads in the last day
82 downloads in the last week
185 downloads in the last month

Yeogurt Generator Build Status NPM version Coverage Status

A Yeoman generator for creating a sensible structure to front-end work using your favorite tools.

Getting Started

  • First off, You will need to have Node.js >= 0.10 installed.
  • Be sure to install yeoman of course! npm install -g yo
  • Install the generator: npm install -g generator-yeogurt
  • Run the generator: yo yeogurt

Features

Available Scaffolding Options:

  • Project/Site naming
  • CSS Preprocessing with LESS or SCSS
  • Modular JavaScript with RequireJS or Browserify
  • IE8+ Support via HTML5shiv and RespondJS
  • JavaScript Linting with JSHint
  • Default ignores for Git or SVN
  • Build deployment to FTP server
  • Dynamic Dashboard - auto-generated dashboard for your site

Included by default:

  • Template inspiration from HTML5 Boilerplate
  • Jade markup templating
  • Feature detection with Modernizr
  • Built in preview server with LiveReload
  • .editorconfig for consistent coding styles within text editors
  • JavaScript unit testing with Jasmine and Karma
  • Automatic build process that includes concatenation, image optimization, CSS and HTML minification, and JS uglification.
  • Sourcemaps for JavaScript and either SCSS or LESS
  • If using regular CSS, grunt-uncss is used to cleanup unused styles and boost performance.

Grunt Tasks

  • grunt serve
    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

Sub-Generators

Available sub-generators:

Note: Generators are to be run from the root directory of your app.

Markup

Creates jade file within the dev/markup/pages folder by default or within another folder using the --type option.

Example:

## Page
yo yeogurt:markup mypage

## Page using specific Template
yo yeogurt:markup mypage --template=one-column

## Template
yo yeogurt:markup mytemplate --type=template

## Helper
yo yeogurt:markup myhelper --type=helper

## Component
yo yeogurt:markup mycomponent --type=component

Script

If using Browserify or RequireJS, this creates module script within the dev/scripts/modules folder by default. Otherwise, the script will be created within dev/scripts. This sub-generator will also create a unit test *Spec file within the test/spec folder (enter grunt test command to run your tests)

Example:

## Module
yo yeogurt:script myscript

Style

If using SASS or LESS, this creates a stylesheet file within the dev/styles/partials folder by default. Otherwise, the stylesheet will be created within dev/styles folder. You can also specify a folder using the --folder option.

Example:

## Create mystyle file within dev/styles/partials folder (SASS or LESS) or dev/styles folder (CSS)
yo yeogurt:style mystyle

## Create mystyle file within dev/styles/base folder
yo yeogurt:style mystyle --folder=base

Dynamic Dashboard

Here is what the dashboard looks like:

It is 'dynamic' because it is generated at compile time using comments placed at the top of development files. An example of these comments in a template file is as follows:

//- Dashboard Data
    !##
    {
        "status": "development",
        "blocks": [
            {
                "blockName": "content",
                "width": "100px",
                "height": "100px",
                "bgcolor": "#9d9d9d",
                "textColor": "#fff",
                "fontSize": "10px"
            }
        ]
    }
    ##!

For markup pages, components, templates, and helpers, these comments create the ability to pass data directly to the dashboard. In the above code example, we are setting a template file's status to be in 'development' and are adding a content block with a name of 'content' and a couple of CSS properties.

Data Properties

Pages, Helpers, Templates, and Components

property:

  • status [String]

possible values:

  • blocked: When development is blocked from continuing
  • queued: Ready to be assigned to a developer
  • development: Development is under way
  • qa: Being tested and evaluated for correct implementation
  • review: 'Under review from code quality stand-point',
  • integration: Being integrated to final development environment (Usually for Content Managment Systems)
  • Complete: 'Development is complete'
Templates Only

property:

  • blocks [Array]

possible values [Each object in Array]:

  • blockName: Name that will be displayed within the created block
  • width: Width of block
  • height: Height of block
  • bgcolor: Background color of block
  • textColor: Color of text within block
  • fontSize: Size of font within block
Helpers and Components Only

property:

  • markup [String]

possible values

  • Any Jade Markup

Huh?

A bit confused? No worries, I recommend generating a test project and taking a look at the jade files within the generated pages, components, templates, and helpers folders. They will have some simple examples of what's possible and you can see your changes if you run grunt serve.

Also, feel free to open up an issue if you think something is too confusing or can be improved.

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

Release History

See Changelog

License

MIT License

npm loves you