Getting Started

This generator utilizes Yeoman and Gulp to scaffold out projects, automate tasks, and manage front-end dependencies respectively. If this is your first time here, it is recommended you read about these tools before proceeding.

Installation

There are a few dependencies that this project relies on:

NOTE: For OSX users
You may have some issues compiling code during installation of packages. Please install Xcode from App Store first. After Xcode is installed,
open Xcode and go to Preferences -> Download -> Command Line Tools -> Install to install command line tools.

Node.js

Check to see if you already have Node installed. Do this by bringing up a terminal/command prompt and type node -v. If the response shows a version at or above v0.12.x, you are all set and can proceed to installing Yeoman, Gulp, and Bower. If you see an error and/or your version is too low, navigate to the Node.js website and install Node from there.

Yeoman & Gulp

Once you have Node installed, make sure you have these tools by opening up a terminal/command prompt and entering following commands:

Command

Response

yo --version

at or above v1.2.1

gulp -v

gulp-cli at or above v0.3.9

If you get any errors and/or you're version(s) are too low, you should run npm install -g yo gulp.
This will install both tools and update them to their latest versions.

Yeogurt

Now that you have all the needed dependencies, you can install this generator with the following command:

npm install -g generator-yeogurt

That completes installation! So at this point you should have all the needed tools to start working Yeogurt.

Setup

When starting a new project, you will want to: open up a terminal/command prompt, make a new directory, and navigate into it.

mkdir my-new-project && cd $_

then, run the Yeogurt generator.

yo yeogurt

Optionally, you can skip the automated installation of npm packages by passing in --skip-install. The main reason to use this is if you have spotty/no internet connection, but would still like to generate your project.

yo yeogurt --skip-install

Follow all the prompts and choose what suits you most for the project you would like to create. When you finish with all of the prompts, your project scaffold will be created and all dependencies will be installed.

NOTE: If you used the --skip-install option, no dependencies will have been installed and your gulp tasks will NOT work.
You will need to run npm install in your project's root directory in order to get started running automated tasks

Once everything is installed, you will see a project structure like below:

If the package installed is a javascript library, you will need to shim it. Instructions for this are in the browserify-shim section of this README.

If the package is CSS, Sass, Less, or Stylus, you can follow the instructions in the Stylesheets section of this README

Data Files

If you want to load global data into your templates (jade or nunjucks), you can add JSON/YAML files in src/_data folder.

For example, add menu.json in src/_data folder:

{

"name":"Home",

"link":"/",

"category":"Page",

"status":"Development"

}

And it will be added to the site.data object so it can be used like so:

div

h1= site.data.menu.name

Which outputs to:

<div>

<h1>Home</h1>

</div>

Creating a dashboard

Using data files, you can build a nice dashboard for your pages and modules.
You can add an example dashboard to your Yeogurt project by going to this Dashboard Example repository
and following the instructions in the README.md.

NOTE: Example dashboard only works with Jade currently

Using SVN

If you plan on using SVN instead of Git, you will want to setup some default ignores to make sure you aren't committing extraneous/generated files to your codebase. To do this, adhere to the following steps:

Step 1

Create a new file in the root of your project named .svnignore and give it the following contents:

node_modules
*.log
build
tmp
.DS_Store

Step 2

Run the following command:

svn propset svn:ignore -R -F .svnignore .

This command will go through your newly created .svnignore file and set the specified files/folders to be ignored by SVN.

Common Issues

ESLint giving errors for third-party scripts

Typical error message:

jQuery is not defined

When adding third-party scripts, you should always import them to your _scripts/main.js file (See Adding third-party libraries).
However, if you shimmed the library/package to be global (ex: window.jQuery), ESLint will not know that your new library is defined globally. Thus, giving you errors.

Solution

To remedy this situation, all you need to do is open up your .eslintrc file in the root directory of you project, and add your new library name to the global: property array: