Introduction to Yeogurt Generator

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

Transcript

1. Scaffolding generator for modern front-end development
2. Underlying Technologies Allow user to make choices on how to generate their folder structure and desired packages, tasks, and compilers Runs automated tasks such as: minifying code, concatenating files, compiling 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 fetching
3. Generator Options • Project/Site naming • Static Site or Single Page Application • CSS Preprocessing with LESS or Sass • 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 • Bootstrap 3.x or Foundation 5.x • Font Awesome 4.x
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) templating. • Can also use Facebook’s React view framework Single Page Applications
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 editors • JavaScript unit testing with Mocha + Chai or Jasmine • Karma used for running tests within browsers and PhantomJS • 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 Markdown • Sourcemaps for both JavaScript and Sass/LESS
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
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
8. Page Structure Components Templates Pages
9. Dynamic Dashboard • Built dynamically through comments in development files • Lists out all categories you specifiy • Works with Jade, Swig, and HTML • Allow for status changes out of the box (Status key) • Saves you from manual updates for client-facing work • Responsive Design
10. Sourcemaps • Sourcemaps created when using either Sass or LESS as well as all JavaScript. • Allow Firefox and Chrome Dev tools to map back from minified/ compiled files to their original source • Gives the ability to network map files loaded in the browser down to development files on your file system. (Chrome only)
11. THANK YOU