my webapp workflow
DESCRIPTION
My webapp workflow with Yeoman, Grunt and Bower. From Kerala Ruby user Group meetup.TRANSCRIPT
MY WEBAPP WORKFLOW
ABOUT MERubyist / JavaScripterYeoman team memberblog.revathskumar.comTwitter/Github - @revathskumar
YEOMANOpinionated stack for web application development
IDEA TO PROTOTYPE IN 10 MINUTES
WHAT YEOMAN CAN DO 4 U?Create directory structure
Boiler plate your code/*global define*/
define([ 'underscore', 'backbone'], function (_, Backbone) { 'use strict';
var TodoModel = Backbone.Model.extend({ defaults: { } });
return TodoModel;});
Install dependencies
Choose only what you needed
INSTALLINSTALL YEOMAN
$ npm install -g yo
USAGE $ yo backbone
$ yo backbone:model Todo
$ yo backbone:collection Todos
$ yo backbone:view IndexView
$ yo backbone:router Todo
OTHER HELPS!1. Install/Run/Update generators
GRUNTThe JavaScript Task Runner
WHY GRUNT?Task runner based on CLIAlternative to Rake/Cake/Make/Jake100+ pluginsLint, test, concat, watch, min etc ....Customize task as you wish!
GRUNTFILE . JS module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { files: { "dist/scripts/app.js": "app/scripts/*.js" } } }, clean: ['dist/*'], });
grunt.loadNpmTasks("grunt-contrib-uglify"); grunt.loadNpmTasks("grunt-contrib-clean");
grunt.registerTask('build', ['clean', 'uglify']); }
TASKS$ grunt clean$ grunt uglify$ grunt build
OTHER TASKSlint, test, livereload, copy, compile templates
BOWERPackage manager for the web
MANAGE YOUR PACKAGES/DEPENDECIESFROM CLI
FLOWCreate boilerplate code with yoInstall dependencies with bowerStart grunt server
Compiles coffeesciptCompiles sass/scssopen page in default web browserlive reload
grunt lintgrunt testgrunt build
jslint, run testsconcat and minify your dependenciescopy assets to dist dir
YEOMANTwitter : Github :
GRUNTJSTwitter : Github :
BOWERTwitter : Github :
QUEST