thuff / generator-yeogurt

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

Yeogurt Generator

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.
  
• You will also need Git >= 1.8.2 installed if you don't already.
  
• 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
• HTML Templating with Jade or Swig
• CSS Preprocessing with LESS or SCSS via node-sass
• Modular JavaScript with RequireJS or Browserify
• IE8+ Support via HTML5shiv and RespondJS
• JavaScript Linting with JSHint
• Feature detection with Modernizr
• Default ignores for Git or SVN
• Build deployment to FTP server
• Dynamic Dashboard - auto-generated dashboard for your site with grunt-dashboard

Included by default:

• Template inspiration from HTML5 Boilerplate
• 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/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 Karma 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 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:

• yeogurt:view
• yeogurt:script
• yeogurt:style

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

View

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

Example:

## Page
yo yeogurt:view mypage

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

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

## Component
yo yeogurt:view 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 which is relative to the dev/styles folder.

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

SVN usage

If using SVN for version control, you will want to runt the generated shell script with the following command: sh svn-init.sh This Shell script will take all files/folders outlined within the .svnignore file and add them to the svn:ignore property of your repository. This will make sure that the files in the .svnignore file will not be added to your SVN repository.

FTP Deployment

If you answer Yes to the Will you be deploying code to an FTP server? question in the generator, you will need to make sure that you fill out the generated .ftppass file. This file looks like this:

{
    "host": "",
    "serverPath": "/html",
    "key1": {
        "username": "jdoe",
        "password": "jdoe1"
      }
}

Be sure to fill out the pertinent FTP information and test to see if it is working by running grunt deploy. For more info on setting up the .ftppass file, refer to the grunt-ftpush documentation

Dynamic Dashboard

The dashboard has been completely overhauled from v0.4.x and moved into it's own plugin: grunt-dashboard. Please refer to the plugin documentation for example usage.

For documentation on the old v0.4.x dashboard, please refer to here

Contributing to this project

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

• Bug reports
• Feature requests
• Pull requests

Release History

See Changelog

License

MIT License