¿Aún generas todo manualmente?

No te preocupes

Puedes empezar con lo básico en uso de terminales, pero necesitas ser experto para aprovechar el 100% del potencial.

Ok

Todo a base de CLI

CLI: Comand Line Interface

¿Qué necesito?

NPM

Quizás el manejador de paquetes por excelencia, NPM ó Node Package Manager, notarás que últimamente todo requiere instalarse con este pequeño software.

npm install whatever
npm install whatever -g
npm uninstall whatever
npm update whatever

Lo siguiente puede cambiar tu mente

No mas...

• FTP
• Copy & Paste
• "final-del-final-este-es-el-bueno"
• Compilar cambios manualmente
• Proyectos desde cero
• Descarga de librerías
• Etc...

Versionar un proyecto

Es importante tener un control de versiones para el proyecto, tendremos etapas de desarrollo donde vale mucho la organización.

git clone /
git add --all
git commit
git push origin wherever
git merge my-branch
git pull origin wherever

O terminas así...

Manejo de dependencias

Los sitios web están hechos por muchas cosas, frameworks, librerías, assets, utilidades y demás. Bower maneja eso por ti.

bower init
bower install whatever
bower install whatever --save
bower install whatever --save-dev
bower update
bower uninstall whatever

Tu compañero no es mesero

Necesitas una patada para iniciar

Desde ahora con una linea de comandos ya tienen la estructura del proyecto hecha. Yeoman ayuda a iniciar rápidamente un proyecto de angularjs, backbone, reactjs y demás.

yo angular my-app
yo backbone my-app
yo whatever my app

yo angular:controller myController
yo whatever:whatever myWhatever

Es casi tu mayordomo

Haz el trabajo sucio

Automatiza todas tus tareas con GruntJS, este ejecutor permite ahorrar mucho tiempo haciendo cosas como:

• Mover o copiar archivos
• Ofuscar código
• Compilar un lenguaje de prepocesador
• Correr un servidor local
• Etc.

Tareas más comunes

Las siguientes tareas son las más utilizadas por los desarrolladores, pero puede haber más.

grunt-contrib-watch //Vigilar cambios en un directorio
grunt-contrib-stylus //Procesar código stylus
grunt-contrib-cssmin //Minificar código CSS
grunt-contrib-bg-shell //Ejecutar linea de comando

//Cargar plugins de Grunt
grunt.loadNpmTasks('grunt-contrib-watch');  
grunt.loadNpmTasks('grunt-contrib-stylus');  
grunt.loadNpmTasks('grunt-contrib-cssmin');  
grunt.loadNpmTasks('grunt-bg-shell');

//Registrar tareas
grunt.registerTask('compilador', ['stylus', 'cssmin']);
grunt.registerTask('servidor', ['bgShellrunNode', 'compilador', 'watch']);

//Ejecutar grunt
grunt whatevertask

Ejemplo completo

Ahora pueden ver un archivo gruntfile.js de ejemplo donde están las tareas completas.

var path = require('path');

var stylesheetsDir = 'public/stylesheets';
var javascriptDir = 'public/javascript';

module.exports = function(grunt) {
	//Project configuration
	grunt.initConfig({	
		pkg: grunt.file.readJSON('package.json'),
		
		bgShell: {
			runNode: {
				cmd: 'node app.js',
				bg: true
			}
		},

		stylus: {
			compile: {
				options: {
					paths: [stylesheetsDir],
					'include css': true
				},
				files: {
					'public/app/css/app.min.css': stylesheetsDir + '/index.styl' 
				}
			}
		},

		watch: {
			stylesheets: {
				files: [stylesheetsDir + '/**/*.styl', stylesheetsDir + '/**/*.css'],
				tasks: ['stylus'],
				options: {
					interrupt: true
				}
			}
		}
	});

	//Load plugins
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-stylus');
	grunt.loadNpmTasks('grunt-bg-shell');

	//Compile Javascript Client-Side and Processing Stylus to CSS
	grunt.registerTask('compile', ['stylus']);

	//Run the server and watch for file changes
	grunt.registerTask('server', ['bgShell:runNode', 'compile', 'watch'])

	//Default task(s)
	grunt.registerTask('default', ['compile']);
};

Por ahora estodo

¿Tienen alguna pregunta?

Recuerda llegar al taller de mañana con "NodeJS" ya instalado.

¡Muchas gracias por asistir!

Sigueme twiter: @jimmylagp