Este es un esfuerzo para que todos los diseñadores o personas que deban trabajar proyectos con html/css usen un solo esquema de trabajo y así todos estemos en la misma página.

• NodeJS 6.10.*
• GulpJS
• Snippets brm para sintaxis de lenguajes en ST2
• Leer Manual Pug
• Leer Manual SMACSS
• Leer Bootstrap v 3.3.7 with Stylus

Si no tiene instaladas estas herramientas en su equipo busque apoyo en Help Desk.

• Lo primero que debe hacer es clonar este repositorio en su equipo para poder realizar las pruebas localmente.

git clone https://github.com/brm-cortesc/frontdesign-package.git

• Luego se abre la consola, se ubica la carpera donde clonó el repositorio.
• Se ejecuta el siguiente comando en la consola para descagar las librerías necesarias.

npm install

src - Es el directorio en donde están los archivos source de preprocesadores (Pug, Stylus, JS:ES6)

src/es6 - Archivos JS:ES6

src/stylus - Archivos .styl que compilan a .css

src/templates - Archivos .pug con los que se arman las etiquetas base del proyecto: head, body, metatags, footer, header,menu, etc.

src/views - Archivos .pug que serán de cada interna que tendrá el proyecto: index/home registro, login, contenido, etc.

publication - Es el directorio que se entrega al desarrollador para subir al servidor

Después de instalar correctamente cada módulo abra los archivos package.json y frontend.json y reemplace los datos con los de su proyecto.

npm start

Se crea http://localhost:3000/ donde podrá ver el corte, css y js que va generando y la tarea se queda escuchando cambios en los archivos para refrescar automaticamente el navegador.

npm run finalizar

Genera archivos compilados y el html con los respectivos archivos vinculados

npm run js:watch

Escucha únicamente archivos de JS:ES6, los compila a ES4 y los minifica

Estas mismas tareas se corren al ejecutar las tareas npm start, npm run finalizar y npm run js:watch

gulp libs

Genera un archivo libs.min.js que contiene los plugins/frameworks que utiliza en el proyecto, estos archivos se agregan en el arreglo jsLibs en el gulpfile.js

gulp css

Procesa archivos .styl a .css usando nib para generar soporte con propiedades css3 (las nuevas propiedades como flex & calc aún no se da soporte)

gulp csslint

Evalua archivos .styl para para reportar errores de sintaxis

gulp minicss

Recoge en orden alfabético los archivos .css en la carpeta publication/css y genera un archivo minificado de css

gulp views

Procesa archivos .pug a .html

gulp watch

Crea http://localhost:3000/ que se escucha cambios en los archivos para refrescar automaticamente el navegador corriendo las tareas de views, css, csslint, js

gulp js:watch

Escucha y procesa archivos JS sintaxis ES6 a JS sintaxis ES4 y los genera minificados.