diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..93f1361 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +npm-debug.log diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..5bdae7b --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,81 @@ +'use strict'; + +module.exports = function(grunt) { + + // Carga todos los plugins de Grunt que indicamos en `package.json` + require('load-grunt-tasks')(grunt); + + // Tareas por defecto + grunt.registerTask('default', ['connect:livereload','watch']) + + // Configuración de tareas + grunt.initConfig({ + + // Settings del proyecto (rutas configurables) + sfotipy: { + app: 'templates', + }, + + // Vigila los cambios que se efectuan en los archivos y ejecuta + // las tareas asignadas + watch: { + // Esto nos permite que el navegador se recargue con cada cambio + // que hagamos en el código. Todas las subtareas que incluyamos en + // en la tarea `watch` ejecutarán livereload a menos que le indiquemos + // lo contrario + livereload: { + options: { + livereload: '<%= connect.options.livereload %>' + }, + files: [ + '<%= sfotipy.app %>/css/estilos.css', + '<%= sfotipy.app %>/index.html', + '<%= sfotipy.app %>/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' + ] + }, + styles: { + files: ['<%= sfotipy.app %>/stylus/{,*/}*.styl'], + tasks: ['stylus'] + } + }, + + // Automatiza el proceso de compilado de Stylus a CSS y su minificación + stylus: { + options: { + use: [require('nib')] + }, + compile: { + options: { + paths: ['<%= sfotipy.app %>/stylus/{,*/}*.styl'], + 'include css': true + }, + files: { + '<%= sfotipy.app %>/css/estilos.css': '<%= sfotipy.app %>/stylus/estilos.styl' + } + } + }, + + // Crea un servidor web de desarrollo para utilizar en local + // La aplicación se muestra en http://localhost:9000 o http://0.0.0.0:9000 + // Podemos acceder desde otros dispositivos en nuestra red, por ejemplo + // un celular o un tablet, simplemente ingresando en nuestros dispostivos + // la URL del equipo en la red (ej: http://192.168.1.X:9000) + connect: { + options: { + port: 9000, + hostname: '0.0.0.0', + livereload: 35729 + }, + // Ejecuta la función livereload para poder ver los cambios del código + // en el navegador en tiempo real + livereload: { + options: { + open: true, + base: ['<%= sfotipy.app %>/'] + } + } + } + + }); + +}; diff --git a/README.md b/README.md index 600e53e..8e1e7ad 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,48 @@ -sfotipy -======= +#sfotipy -El proyecto oficial del curso de Frontend Profesional +El proyecto oficial del [curso de Frontend Profesional](http://mejorando.la/frontend) Los archivos trabajados en las clases 1, 2 y 3 están en una nueva rama https://github.com/Sfotipy/sfotipy/tree/clases_123 Se libre de contribuir al proyecto terminando el resto del diseño de Sfotipy :) + +## Instalación + +### Grunt.js y Node.js + +Para automatizar y agilizar el desarrollo frontend del proyecto, hemos instalado +[Grunt](http://gruntjs.com), que es un gestor de tareas que corre en JavaScript + +Necesitas tener instalado [NodeJS](http://nodejs.org/downloads), ya que Grunt lo utiliza, +pero no hay que preocuparse, no es necesario saber Node.js para utilizarlo. Es igual +que Stylus, lo utiliza como motor por debajo. + +Si tienes MAC, puedes instalar con `homebrew`: +```sh +# Instala Homebrew en tu equipo +$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" +# Instala Node con Brew +$ brew install node +``` +### Dependencias globales +Una vez tenemos Node instalado, podemos instalar las siguientes dependencias +globalmente ya que las utilizaremos en este y otros proyectos +``` +$ sudo npm install -g stylus +$ sudo npm install -g nib +$ sudo npm install -g grunt +$ sudo npm install -g grunt-cli +``` + +## Ejecución +Para arrancar el proyecto, primero necesitamos instalar las dependencias de +desarrollo que hemos definido en el `package.json` lo hacemos con +``` +$ npm install +``` +Entonces ya podemos correr el servidor y empezar a desarrollar el frontend e ir visualizando los cambios, lo hacemos con la tarea por defecto de `Grunt` +``` +$ grunt +``` +Esto nos abrirá por defecto una ventana del navegador en la URL [http://0.0.0.0:9000](http://0.0.0.0:9000) y gracias a `livereload` podemos ver los cambios son necesidad de recargar la +página diff --git a/package.json b/package.json new file mode 100644 index 0000000..5444657 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "sfotipy", + "description": "Proyecto oficial del curso de Frontend Profesional", + "version": "0.0.1", + "dependencies": {}, + "devDependencies": { + "grunt": "0.4.4", + "grunt-cli": "~0.1.13", + "grunt-contrib-connect": "~0.7.1", + "grunt-contrib-stylus": "~0.13.2", + "grunt-contrib-imagemin": "~0.5.0", + "grunt-contrib-watch": "~0.6.1", + "load-grunt-tasks": "~0.4.0", + "nib": "~1.0.2" + } +}