startit
v1.2.1
✔ Projet de démarrage simple permettant une livraison plus rapide de projets et / ou:
- Déploiement automatique des pages GitHub
- Publier la version à GitHub
Cela fournit un exemple de projet qui automatise les tâches avec Gulp, notamment:
Ce projet a des requêtes que vous devez répondre afin de la compiler.
Afin de commencer à utiliser le projet, vous devez le cloner sur votre PC avec la commande git, remplacez [your-project] par le nom de votre projet:
git clone https://github.com/adorade/startit.git [your-project]Accédez au dossier:
cd [your-project]Installez les dépendances:
yarn install Notez que les versions du module ont été fixées pour garantir la compatibilité. Exécutez yarn outdated et mettez à jour package.json si nécessaire.
Pour commencer à l'utiliser, la seule chose que vous devez faire est d'ouvrir le projet sur votre éditeur de code de choix et de code. Pour compiler et vivre en direct toutes vos modifications, vous avez une commande qui vous aidera. Voici la liste des commandes que vous devez connaître.
Chaque commande doit être exécutée sur le répertoire racine du projet en utilisant la commande Gulp comme gulp cleaner ou gulp build :
| Tâche | Description |
|---|---|
| nettoyeur | Supprimer tous les fichiers compilés |
| linter | Styles de peluche, scripts et fichiers carlins |
| styles | Compiler les styles SASS |
| scripts | Compiler les fichiers JavaScript |
| polices | Copier les polices |
| statique | Copier les fichiers statiques |
| images | Optimiser les images |
| pages | Compiler les modèles de carlin |
| servir | Démarrez le serveur et surveillez toutes les modifications |
| construire | Construire le projet |
| dev | Compiler et surveiller les modifications |
| déployer | Déployer des fichiers sur les pages GitHub |
| libérer | Publier la version à GitHub |
| défaut | Tâche de gulp par défaut |
| chèques | Vérifier la configuration de Gulp |
| aide | Imprimer le message d'aide |
Exécutez gulp --tasks pour voir toutes les tâches de gorgée disponibles.
Si vous êtes en développement, la commande gulp dev est le meilleur choix pour vous. Accédez au dossier du projet dans la console et exécutez gulp dev , il compilera le projet et démarrera un serveur qui actualisera chaque fois que vous changerez quelque chose dans le code.
Gulp surveillera les modifications et vous dira comment accéder au projet à partir de l'URL locale et publique.
Chaque navigateur qui pointe vers cette URL sera rafraîchi automatique. En tant que fonctionnalité supplémentaire pour tester l'objectif, toute interaction sur un navigateur sera reflétée sur d'autres. Essayez-le sur un téléphone, une tablette et un PC en même temps.
Le projet a une structure très simple et flexible. Si le lieu par défaut pour un fichier ou un répertoire doit être déplacé, assurez-vous de mettre à jour vers la nouvelle position sur le fichier 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 Tous les fichiers des dossiers dist et tmp seront générés automatiquement par les différentes tâches lorsque le projet se compile. Assurez-vous de ne modifier aucun fichier manuellement dans ces dossiers car les modifications seront remplacées sur le processus de compilation.
Ce projet a de belles options de configuration pour répondre à tout ce dont vous avez besoin. Pour configurer, vous devez modifier les fichiers suivants et modifier toute valeur dont vous avez besoin:
tool/util/banner.js - bannière pour scripts et fichiers de stylestool/util/config.js - Configuration du projettool/util/options.js - Options pour les plugins Après chaque modification que vous avez effectuée, vérifiez avec gulp checks si tout est en ordre et il n'y a pas d'erreurs.
Chaque aspect de cette configuration est décrit dans le fichier afin que vous connaissiez les options.
Exécuter en mode de développement en direct:
yarn run start
# or
gulp
# or
gulp dev Naviguez vers http://localhost:1234/ ou l'URL External si vous accédez à partir d'un autre appareil.
Trouvez la liste complète des tâches:
gulp -T
# or
gulp -T --tasks-depth 0 Définissez NODE_ENV sur production afin que les tâches Gulp produisent du code final, c'est-à-dire des fichiers minifés et désactivent la génération SourceMap.
yarn run build
# or
gulp build --production Définissez manuellement NODE_ENV en fonction de votre système d' production :
Linux / Mac OS:
NODE_ENV=production
gulp build (ou en ligne NODE_ENV=production gulp build )
Windows PowerShell:
$ env: NODE_ENV = " production "
gulp buildLigne de commande Windows Legacy:
set NODE_ENV = production
gulp build Pour déployer automatiquement votre projet sur les pages GitHub et la rendre disponible sur https://[your-username].github.io/[your-project-name] use:
yarn run deploy
# or
gulp build --production && gulp deployPour publier la version à GitHub Use:
yarn run release
# or
gulp releaseCe projet est concédé sous licence MIT
