A Yeoman generator for creating a sensible structure to front-end work using your favorite tools.
- 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
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 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
Runsgrunt build
and compresses the entire site to a ZIP file -
grunt deploy
Runsgrunt zip
and pushes both production-ready files and zip file to a specified FTP server
Available sub-generators:
Note: Generators are to be run from the root directory of your app.
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
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
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
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.
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
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
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.
See Changelog