startit
v1.2.1
✔ Proyecto de inicio simple que permite una entrega más rápida de proyectos y/o:
- despliegue automático de páginas de Github
- Publicar el lanzamiento de Github
Esto proporciona un proyecto de ejemplo que automatiza las tareas con Gulp que incluyen:
Este proyecto tiene algunas requisiciones que debe cumplir para compilarlo.
Para comenzar a usar el proyecto, debe clonarlo a su PC con el comando git, reemplace [your-project] con el nombre de su proyecto:
git clone https://github.com/adorade/startit.git [your-project]Navegue a la carpeta:
cd [your-project]Instalar dependencias:
yarn install Tenga en cuenta que las versiones del módulo se han solucionado para garantizar la compatibilidad. Ejecute yarn outdated y actualice package.json según sea necesario.
Para comenzar a usarlo, lo único que debe hacer es abrir el proyecto en su editor de código de elección y código. Para compilar y obtener una vista previa en vivo todos sus cambios, tiene algún comando que lo ayudará. Aquí está la lista de comandos que debe saber.
Cada comando debe ejecutarse en el directorio raíz del proyecto utilizando el comando Gulp como gulp cleaner o gulp build :
| Tarea | Descripción |
|---|---|
| limpiador | Eliminar todos los archivos compilados |
| intervalor | Estilos de pelusa, scripts y archivos PUG |
| estilos | Compilar los estilos de sass |
| guiones | Compilar los archivos JavaScript |
| fuentes | Copiar fuentes |
| estadística | Copiar archivos estáticos |
| imágenes | Optimizar imágenes |
| páginas | Compilar las plantillas de pug |
| atender | Inicie el servidor y esté atento a cualquier cambio |
| construir | Construir el proyecto |
| enchufe | Compilar y observar cambios |
| desplegar | Implementar archivos en páginas de Github |
| liberar | Publicar el lanzamiento de Github |
| por defecto | Tarea de Gulp predeterminada |
| cheques | Verifique la configuración de Gulp |
| ayuda | Imprimir mensaje de ayuda |
Ejecute gulp --tasks para ver todas las tareas de Gulp disponibles.
Si está en desarrollo, el comando gulp dev es la mejor opción para usted. Vaya a la carpeta del proyecto en la consola y ejecute gulp dev , compilará el proyecto e iniciará un servidor que se actualizará cada vez que cambie algo en el código.
Gulp estará atento a los cambios y le dirá cómo acceder al proyecto desde la URL local y pública.
Cada navegador que apunta a esa URL se actualizará automáticamente. Como característica adicional para el propósito de prueba, cualquier interacción en un navegador se reflejará en cualquier otra. Pruébelo en un teléfono, tableta y PC al mismo tiempo.
El proyecto tiene una estructura muy simple y flexible. Si se debe mover el lugar predeterminado para cualquier archivo o directorio, asegúrese de actualizar la nueva posición en el archivo tool/util/config.js .
├── dist - > All the compiled files will be placed here (Production)
├── logs - > Logs files
├── src - > Source files for the project
│ ├── es6 - > Scripts
│ ├── fonts - > Fonts
│ ├── images - > Images
│ ├── scss - > Sass
│ ├── static - > Favicons...
│ ├── vendors - > Vendors folder for all the dependencies
│ └── views - > Templates directory for Pug files
├── test - > Tests Files
├── tmp - > All the compiled files will be placed here (Development)
├── tools - > Project tools and configuration
│ ├── build - > files for build
│ ├── tasks - > tasks files for gulp
│ └── util - > config and options for project
├── package.json - > NodeJS configuration file
├── gulpfile.esm.js - > Gulp tasks
├── README.md - > README
└── ... config files for packages Todos los archivos en las carpetas dist y tmp se generarán automáticamente mediante las diferentes tareas cuando el proyecto se compila. Asegúrese de no modificar ningún archivo manualmente en estas carpetas porque los cambios se reemplazarán en el proceso de compilación.
Este proyecto tiene algunas opciones de configuración agradables para cumplir con todo lo que necesita. Para configurar, necesita editar los siguientes archivos y cambiar cualquier valor que necesite:
tool/util/banner.js - Banner para scripts y archivos de estilostool/util/config.js - Configuración del proyectotool/util/options.js - Opciones para complementos Después de cada cambio que ha realizado, consulte con gulp checks si todo está en orden y no hay errores.
Cada aspecto de esta configuración se describe en el archivo para que conozca las opciones.
Ejecutar en modo de desarrollo de recuperación en vivo:
yarn run start
# or
gulp
# or
gulp dev Navegue a http://localhost:1234/ o la URL External si se accede desde otro dispositivo.
Encuentre la lista completa de tareas:
gulp -T
# or
gulp -T --tasks-depth 0 Establezca NODE_ENV en production para que las tareas de Gulp producan el código final, es decir, minificar los archivos y deshabilitar la generación SourCEMAP.
yarn run build
# or
gulp build --production Establezca NODE_ENV en production manualmente dependiendo de su sistema operativo:
OS de Linux/Mac:
NODE_ENV=production
gulp build (o en línea NODE_ENV=production gulp build )
Windows PowerShell:
$ env: NODE_ENV = " production "
gulp buildLínea de comando Legacy Windows:
set NODE_ENV = production
gulp build Para implementar automáticamente su proyecto en las páginas de GitHub y ponerlo a disposición en https://[your-username].github.io/[your-project-name] use:
yarn run deploy
# or
gulp build --production && gulp deployPara publicar la versión para usar GitHub:
yarn run release
# or
gulp releaseEste proyecto tiene licencia bajo la licencia MIT
