startit
v1.2.1
✔ Einfaches Starterprojekt, das eine schnellere Lieferung von Projekten und/oder:
- Automatische Bereitstellung von Github -Seiten
- Veröffentlichung von GitHub veröffentlichen
Dies liefert ein Beispielprojekt, das Aufgaben mit Gulp automatisiert, einschließlich:
Dieses Projekt hat einige Anforderungen, die Sie erfüllen müssen, um es zu kompilieren.
Um das Projekt zu verwenden, müssen Sie es mit dem Befehl git auf Ihren PC klonen, ersetzen Sie [your-project] durch Ihren Projektnamen:
git clone https://github.com/adorade/startit.git [your-project]Navigieren Sie zum Ordner:
cd [your-project]Abhängigkeiten installieren:
yarn install Beachten Sie, dass Modulversionen festgelegt wurden, um die Kompatibilität zu gewährleisten. Führen Sie yarn outdated und aktualisieren Sie package.json nach Bedarf.
Um es zu verwenden, müssen Sie das Projekt nur für Ihren Code -Editor von Choice und Code öffnen. Um alle Ihre Änderungen zu kompilieren und zu live -Vorschau zu bringen, haben Sie einen Befehl, der Ihnen hilft. Hier sind die Liste der Befehle, die Sie kennen sollten.
Jeder Befehl muss im Stammverzeichnis des Projekts mit dem Gulp -Befehl wie gulp cleaner oder gulp build ausgeführt werden:
| Aufgabe | Beschreibung |
|---|---|
| Reiniger | Entfernen Sie alle kompilierten Dateien |
| Linter | Fusselstile, Skripte und Mopsdateien |
| Stile | Kompilieren Sie die Sass -Stile |
| Skripte | Kompilieren Sie die JavaScript -Dateien |
| Schriftarten | Schriftarten kopieren |
| Statik | Statische Dateien kopieren |
| Bilder | Bilder optimieren |
| Seiten | Die Mopsvorlagen zusammenstellen |
| Aufschlag | Starten Sie den Server und achten Sie auf Änderungen |
| bauen | Bauen Sie das Projekt auf |
| Dev | Kompilieren Sie und achten Sie auf Änderungen |
| einsetzen | Stellen Sie Dateien auf GitHub -Seiten ein |
| freigeben | Veröffentlichung von GitHub veröffentlichen |
| Standard | Standard -Gulp -Aufgabe |
| Überprüfungen | Überprüfen Sie die Gulp -Konfiguration |
| helfen | Druckenhilfenachricht |
Führen Sie gulp --tasks aus, um alle verfügbaren Gulp -Aufgaben anzuzeigen.
Wenn Sie sich in der Entwicklung befinden, ist der Befehl gulp dev die beste Wahl für Sie. Gehen Sie zum Projektordner in der Konsole und führen Sie gulp dev aus. Er kompiliert das Projekt und startet einen Server, der jedes Mal aktualisiert wird, wenn Sie etwas im Code ändern.
Gulp wird nach Änderungen beobachten und Ihnen mitteilen, wie Sie von lokaler und öffentlicher URL auf das Projekt zugreifen können.
Jeder Browser, der auf diese URL hinweist, wird automatisch aktualisiert. Als zusätzliches Merkmal zum Testzweck wird jede Interaktion auf einem Browser in allen anderen reflektiert. Probieren Sie es gleichzeitig auf einem Telefon, Tablet und PC aus.
Das Projekt hat eine sehr einfache und flexible Struktur. Wenn der Standardplatz für eine Datei oder ein Verzeichnis verschoben werden muss, sollten Sie unbedingt die neue Position in der Datei tool/util/config.js aktualisieren.
├── 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 Alle Dateien in den Ordnern dist und tmp werden durch die verschiedenen Aufgaben automatisch generiert, wenn das Projekt kompiliert. Stellen Sie sicher, dass Sie keine Datei in diesen Ordnern manuell ändern, da Änderungen am Kompiliervorgang ersetzt werden.
Dieses Projekt verfügt über einige nette Konfigurationsoptionen, um alle Sie zu erfüllen. Um zu konfigurieren, müssen Sie die folgenden Dateien bearbeiten und jeden von Ihnen benötigten Wert ändern:
tool/util/banner.js - Banner für Skript- und Stildateientool/util/config.js - Projektkonfigurationtool/util/options.js - Optionen für Plugins Nach jeder Änderung, die Sie vorgenommen haben, überprüfen Sie gulp checks ob alles in Ordnung ist und es keine Fehler gibt.
Jeder Aspekt dieser Konfiguration wird in der Datei so beschrieben, dass Sie die Optionen kennen.
Laufen im Live-Reloading-Entwicklungsmodus:
yarn run start
# or
gulp
# or
gulp dev Navigieren Sie zu http://localhost:1234/ oder zur External URL, wenn Sie von einem anderen Gerät zugreifen.
Suchen Sie die vollständige Liste der Aufgaben:
gulp -T
# or
gulp -T --tasks-depth 0 Setzen Sie NODE_ENV auf production , sodass Gulp -Aufgaben endgültige Code erzeugen, dh minify -Dateien und Deaktivieren der Sourcemap -Generation.
yarn run build
# or
gulp build --production Setzen Sie NODE_ENV je nach Betriebssystem auf production manuell:
Linux/Mac OS:
NODE_ENV=production
gulp build (oder Inline NODE_ENV=production gulp build )
Windows PowerShell:
$ env: NODE_ENV = " production "
gulp buildWindows Legacy -Befehlszeile:
set NODE_ENV = production
gulp build So bereitstellen Sie Ihr Projekt automatisch auf GitHub-Seiten und machen Sie es unter https://[your-username].github.io/[your-project-name] Verwenden:
yarn run deploy
# or
gulp build --production && gulp deployVeröffentlichung der Veröffentlichung für die Verwendung von GitHub:
yarn run release
# or
gulp releaseDieses Projekt ist unter der MIT -Lizenz lizenziert
