My webapp workflow

Post on 15-Jan-2015

3,525 views 0 download

Tags:

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

QUEST