Skip to content
Kit de inicio para desarrollo web con HTML, SCSS, JS, Módulos EcmaScript y PHP automatizado con Gulp
PHP JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.babelrc
.editorconfig
.gitignore
README.md
gulpfile.babel.js
package-lock.json
package.json

README.md

kEnAi Gulp Starter Kit

kEnAi Gulp Starter Kit

Kit de inicio para desarrollo frontend (HTML, Sass y JS) y/o backend (PHP) basado en componentes y automatizado con Gulp desarrollado por @jonmircha.

Después de HTML5, los componentes web son el siguiente gran salto en el paradigma del desarrollo web frontend, pero aun no están listos, sin embargo con herramientas como Node, Gulp, Sass, PostCSS, UnCSS, Babel, Browserify, entre algunos otros, podemos desarrollar proyectos con la filosofía de reutilización y componetización que proponen los componentes web, sin necesidad de usar frameworks y librerías robustas como Angular, React, Vue.js o Polymer.

Además este kit tiene la filosofía de generar un sólo archivo CSS gracias a los imports de Sass y un sólo archivo JavaScript gracias a Browserify, adicionalmente con Babel puedes utilizar todas las características del estándar EcmaScript como los módulos (import y export).

↖️ regresar al índice

Para comenzar:

Sólo ejecuta los siguientes comandos:

  • npm install Para instalar todas las dependencias.
  • npm start Para comenzar a trabajar proyecto frontend y backend con PHP.
  • npm run front Para comenzar a trabajar proyecto frontend (sin PHP).

↖️ regresar al índice

Estructura del kit:

Carpetas:

📁 src:

Es el directorio donde tendremos los archivos del proyecto en fase de desarrollo, y se estructura de la siguiente manera:

  • 📁 img: Contendrá las imágenes del proyecto sin optimizar.
  • 📁 js: Contendrá los archivos JS que serán compilados con Babel y unificados con Browserify.
    • 📁 components: Contendrá los archivos de la programación JS de los componentes.
    • 📁 helpers: Contendrá los archivos de la programación JS de códigos auxiliares que no sean componentes, como la conexión a una API, funciones para formatear o filtrar contenido, etc.
    • 📄 index.js: Es el archivo principal JS del proyecto, en el que se podrá importar los componentes que se requieran de la carpeta components, helpers o de las dependencias que se tenga en node_modules.
  • 📁 scss: Contendrá los archivos .scss que compilarán a archivos CSS.
    • 📁 components: Contendrá los archivos partials de la presentación SCSS o CSS de los componentes.
    • 📁 helpers: Contendrá los archivos partials .scss o .css de los estilos auxiliares que no sean parte de un componente, internamente esta carpeta te propone 3 archivos:
      • 📄 reset.scss: Es el archivo que contendrá los estilos de reseteo y normalización para todos los navegadores.
      • 📄 utilities.scss: Es el archivo que contendrá estilos utilitarios y auxiliares que pueden servir en cualquier componente, elemento de contenido o maquetación.
      • 📄 pages.scss: Es el archivo que contendrá los estilos de maquetación de las páginas o secciones del proyecto.
    • 📄 style.scss: Es el archivo principal SCSS del proyecto que compilara a CSS, en el que se podrá importar partials de las carpetas components, helpers o de las dependencias que se tenga en node_modules.
  • 📁 app: Contendrá los archivos .php que conformen el proyecto, eres libre de estructurar el contenido dentro de esta carpeta.

📁 public:

Es el directorio donde tendremos la versión para publicar del proyecto con todos los archivos HTML y/o PHP generados, lás imágenes optimizadas y archivos estáticos requeridos, así como un sólo archivo CSS llamado ./css/style.css y un sólo archivo JS llamado ./js/script.js que contendrán toda la presentación y programación respectivamente.

Archivos:

  • 📄 package.json: Contiene la configuración del proyecto, en el podrás ver todas las dependencias y los scripts NPM programados del kit.
  • 📄 .gitignore: Indica que archivos y directorios ignorará Git al momento de sincronizar el proyecto, la configuración que se propone ha sido generada en el sitio gitignore.io y es esta: osx,node,macos,linux,windows,visualstudiocode siéntete libre de modificarla a tus necesidades.
  • 📄 .editorconfig: Contiene la definición de la configuración para mantener la codificación estándar entre diferentes editores e IDEs, considera que en algunos editores tendrás que instalar un plugin adicional para que funcione, consulta el sitio editorconfig.org para saber si tu editor o ide lo soporta nativamente o requiere algún plugin.
  • 📄 .babelrc: Contiene la configuración de Babel.
  • 📄 gulpfile.babel.js: Contiene la programación JS de las tareas gulp de este kit de inicio con soporte de módulos ECMAScript.
  • 📄 README.md: Contiene la documentación de este kit.

↖️ regresar al índice

Scripts NPM:

Este kit tiene disponible los siguientes comandos para optimizar y automatizar proyectos frontend y backend con PHP, siéntete libre de modificarlos a tus necesidades.

Recuerda que todos los comandos de NPM se corren desde la terminal con npm run [nombre del comando]

  • 💲 start: Levanta un servidor web proxy live reload con Browser Sync para poder compilar archivos PHP, HTML, SCSS y JS con soporte de módulos ECMAScript. El servidor levanta tomando en cuenta la configuración de la variable proxyOptions del archivo gulpfile.babel.js.
  • 💲 front: : Levanta un servidor web live reload con Browser Sync para poder compilar archivos HTML, SCSS y JS con soporte de módulos ECMAScript. El servidor levanta tomando en cuenta la configuración de la variable serverOptions del archivo gulpfile.babel.js.
  • 💲 media: Optimiza las imágenes del proyecto y envía los archivos multimedia (png, jpg, jpeg, gif, svg, ico, webp, mp4, mp3) de la carpeta ./src/img a la ./public/img.
  • 💲 uncss: Remueve el código CSS innecesario del proyecto, tomando en cuenta la configuración de la variable uncssOptions del archivo gulpfile.babel.js.

↖️ regresar al índice

You can’t perform that action at this time.