presentation

View Github Repository Open presentation in a new window

aladine

See all presentation from aladine

presentation

1 0

presentation

This is presentation using reveal.js. The content is regards to Yeoman, Grunt and Bower

On Github aladine / presentation

Yeoman, GruntJs and Bower

A modern webapp workflow

@littledan.tk

Introduction

  • Yo is used to generate things, from other generators to files and more.
  • Bower is used for dependency management, downloading and installing .js components.
  • Grunt is used for task management such as building, previewing and testing.

Bower

http://bower.io/

  • Problem: Javascript/CSS plugin: latest version keep changing. What happened when the version of plugin change
  • Usage: Install jquery: bower install jquery

	     	{	
	"name": "yeoman-gruntjs-and-bower",
	"version": "0.0.0",
	"dependencies": {
		"reveal.js": "git@github.com:hakimel/reveal.js.git#master",
		"handlebars": "~1.0.0",
		"jquery": "~1.10"
	}
}

Current Plugins

Plugin Name Version File JQuery 1.10.1 JQuery UI 1.9 jquery/jquery-ui/jquery-ui-1.9.2.js Highcharts 3.0 Modernizr 2.6.1 modernizr-2.6.1.min.js Lightbox jquery/jquery.lightbox_me.js Hierachy tree jquery/tree.jquery.js Lazyload jquery/jquery.lazyload.js Plupload KSS-Node Sass Compass
Nobody likes going to GitHub or random developers’ sites to download a .zip of a JavaScript tool.

Grunt

http://gruntjs.com

  • A task runner script: minification, compilation, unit testing, linting
  • Tasks are defined and customized in a Gruntfile.js file, which lives in the root directory of your project.
  • Command: 
    grunt server
grunt build 
grunt test

Automation FAQ: Grunt Plugin http://gruntjs.com/plugins. Many are officially support by grunt team http://gruntjs.com/frequently-asked-questions Create new plugin: http://gruntjs.com/creating-plugins http://gruntjs.com/

Yeoman

http://yeoman.io

  • Yeoman generators: Community-based driven workflow autogenerator for different framework.
  • Yeoman provides: an optimized scaffolding and workflow experience for creating compelling web applications

A typical workflow between this trinity of tools might look like: yo webapp yo angular bower install angular-directives grunt http://yeoman.io/generators.html#snippets http://yeoman.io/faq.html

Sample Workflow

npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
bower install angular-ui          # install a dependency for your project from Bower
grunt test                        # test your app
grunt server                      # preview your app
grunt                             # build the application for deployment

Features

  • Lightning-fast scaffolding
  • Great build process
  • Automatically compile CoffeeScript & Compass
  • Automatically lint your scripts
  • Built-in preview server
  • Awesome Image Optimization
  • Killer package management
  • PhantomJS Unit Testing

Thank you

littledan1