WebStorm/Neues Projekt (HowTo): Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenzzur nächsten Versionen-Differenz →
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Zeile 11: Zeile 11:
==Erstellen eines neuen Projektes==
==Erstellen eines neuen Projektes==


* <code>File</code> bzw. </code>WebStorm</code>  → </code>Project</code>  → </code>Empty Project</code>   
* <code>File</code> bzw. </code>WebStorm</code>  → <code>Project</code>  → <code>Empty Project</code>   
* <code>Location</code>: Pfad auf Entwicklungsrechner auswählen
* <code>Location</code>: Pfad auf Entwicklungsrechner auswählen
* </code>Create</code>
* </code>Create</code>


Mit Subversion koppeln:
Mit Subversion koppeln:
* <code>VCS</code> → </code>Import into Version Control</code> → </code>Share Project (Subversion)</code>   
* <code>VCS</code> → <code>Import into Version Control</code> → <code>Share Project (Subversion)</code>   
* Evtl. <code>repository location</code> hinzufügen (Klick auf grünes Plus-Icon).
* Evtl. <code>repository location</code> hinzufügen (Klick auf grünes Plus-Icon).
* Im Repository-Baum den Zielordner wählen. Fehlende Ordner anlegen: Rechtsklick auf Ordner → </code>New</code>  → </code>Remote Folder ...</code>  
* Im Repository-Baum den Zielordner wählen. Fehlende Ordner anlegen: Rechtsklick auf Ordner → <code>New</code>  → <code>Remote Folder ...</code>  
* <code>Define share target</code>: endgültigen Zielordner wählen
* <code>Define share target</code>: endgültigen Zielordner wählen
* <code>Share</code> → </code>1.8 format</code> bzw. höchstmögliches SVN-Format wählen → <code>OK</code> → <code>OK</code> → <code>Yes</code>
* <code>Share</code> → <code>1.8 format</code> bzw. höchstmögliches SVN-Format wählen → <code>OK</code> → <code>OK</code> → <code>Yes</code>


Dateistruktur erstellen:
Dateistruktur erstellen:
Zeile 27: Zeile 27:
* Fügen Sie die entpackten Dateien in das Wurzelverzeichnis Ihres Projektes ein.  
* Fügen Sie die entpackten Dateien in das Wurzelverzeichnis Ihres Projektes ein.  
** Wenn das Fenster <code>Move specified elements</code> aufpoppt, überprüfen Sie, ob der Pfad stimmt und drücken <code>OK</code>.
** Wenn das Fenster <code>Move specified elements</code> aufpoppt, überprüfen Sie, ob der Pfad stimmt und drücken <code>OK</code>.
** Als nächstes poppt das Fenster <code>Select Files to Add to Subversion</code> auf. '''Deselktieren Sie „<code>node_packages</code>“''' und drücken dann <code>OK</code>.
** Als nächstes poppt das Fenster <code>Select Files to Add to Subversion</code> auf. Deselktieren Sie Pfade, dies Sie nicht in Ihrem Subversion-Repository speichern wollen (wie {{zB}} „<code>doc</code>“) und drücken Sie dann <code>OK</code>.
** '''Setzen Sie <code>node_packages</code>auf die SVN-Ignore-Liste''' (sonst werden künftig unnötigerweise Tausende von Dateien ins Repository übertragen): Rechtsklick auf <code>node_packages</code>  → <code>Subversion</code> → <code>Ignore</code> → <code>node_packages</code>
** Sollte der vorangegangene Schritt schief gegangen sein (WebStorms Subversion-Tools sind in dieser Hinsicht ziemlich schlecht), müssen Sie den letzten Schritt gegebenenfalls mit einem anderen Tool bewerkstelligen. Unter Windows ist Tortoise dafür recht gut geeignet.


Inhalte der Dateien anpassen:
Inhalte der Dateien anpassen:
Zeile 35: Zeile 33:
** <code>conf/jsdoc.js</code> (zumindest <code>systemName</code> und <code>footer</code>)
** <code>conf/jsdoc.js</code> (zumindest <code>systemName</code> und <code>footer</code>)
** <code>package.json</code> (zumindest <code>name</code>, <code>description</code>, <code>url</code> und <code>author</code>)
** <code>package.json</code> (zumindest <code>name</code>, <code>description</code>, <code>url</code> und <code>author</code>)
Node.js-Module initialisieren:
* Öffnen Sie das WebStorm-Terminal: <code>npm update</code> → Der Ordner „<code>node_modules</code>“ wird erstellt und mit Dateien befüllt.
* '''Setzen Sie <code>node_modules</code>auf die SVN-Ignore-Liste''' (sonst werden künftig unnötigerweise Tausende von Dateien ins Repository übertragen): Rechtsklick auf <code>node_modules</code>  → <code>Subversion</code> → <code>Ignore</code> → <code>node_modules</code>
* Sollte der vorangegangene Schritt schief gegangen sein (WebStorms Subversion-Tools sind in dieser Hinsicht ziemlich schlecht), müssen Sie den letzten Schritt gegebenenfalls mit einem anderen Tool bewerkstelligen. Unter Windows ist Tortoise dafür recht gut geeignet.
* Geben Sie folgende Befehle in das Web-Storm-Terminal ein:
** <code>grunt cssmin</code>
** <code>grunt uglify</code>
* Es werden zwei neue Dateien erstellt: „<code>web/css/main.css</code>“ und „<code>web/js/main.js</code>“.
* Stellen Sie diese Dateien unter Versionskontrolle: Rechtsklick auf die Datei  → <code>Subversion</code> → <code>Add to VCS</code>.
* Erstellen Sie für den Grunt-Task „<code>watch</code>“ einen WebStorm-Startup-Task:
**<code>File</code> bzw. </code>WebStorm</code>  → <code>Settings</code> bzw. <code>Preferences</code>  → <code>Tools</code>  → <code>Startup Tasks</code>
**Klick auf grünes Plus-Icon → <code>Add New Configuration</code> → <code>Grunt.js</code>
**Name: <code>Watch</code>, Tasks: <code>watch</code> → <code>OK</code>
* Starten Sie WebStorm neu.
* Nun sollte der Task  „<code>Watch</code>“ laufen.
Sichern Sie Ihr Projekt im Repository:
* Klick auf Subversion-Commit-Icon  → Commit Message:  <code>Project ... created and initialized.</code>→ <code>Commit</code>


==Quellen==
==Quellen==

Version vom 12. Oktober 2016, 11:12 Uhr

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3
(zu größeren Teilen überprüft) 		Umfang: 2
(wichtige Fakten fehlen) 		Quellenangaben: 3
(wichtige Quellen vorhanden) 		Quellenarten: 3
(gut) 		Konformität: 5
(ausgezeichnet)

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Erstellen eines neuen Projektes

  • File bzw. WebStorm → Project → Empty Project
  • Location: Pfad auf Entwicklungsrechner auswählen
  • Create

Mit Subversion koppeln:

  • VCS → Import into Version Control → Share Project (Subversion)
  • Evtl. repository location hinzufügen (Klick auf grünes Plus-Icon).
  • Im Repository-Baum den Zielordner wählen. Fehlende Ordner anlegen: Rechtsklick auf Ordner → New → Remote Folder ...
  • Define share target: endgültigen Zielordner wählen
  • Share → 1.8 format bzw. höchstmögliches SVN-Format wählen → OK → OK → Yes

Dateistruktur erstellen:

  • Entpacken Sie eine der folgenden Template-Projekte
  • Fügen Sie die entpackten Dateien in das Wurzelverzeichnis Ihres Projektes ein.
    • Wenn das Fenster Move specified elements aufpoppt, überprüfen Sie, ob der Pfad stimmt und drücken OK.
    • Als nächstes poppt das Fenster Select Files to Add to Subversion auf. Deselktieren Sie Pfade, dies Sie nicht in Ihrem Subversion-Repository speichern wollen (wie z. B. „doc“) und drücken Sie dann OK.

Inhalte der Dateien anpassen:

  • Passen Sie in folgenden Dateien die Inhalte an Ihre Gegebenheiten an:
    • conf/jsdoc.js (zumindest systemName und footer)
    • package.json (zumindest name, description, url und author)

Node.js-Module initialisieren:

  • Öffnen Sie das WebStorm-Terminal: npm update → Der Ordner „node_modules“ wird erstellt und mit Dateien befüllt.
  • Setzen Sie node_modulesauf die SVN-Ignore-Liste (sonst werden künftig unnötigerweise Tausende von Dateien ins Repository übertragen): Rechtsklick auf node_modules → Subversion → Ignore → node_modules
  • Sollte der vorangegangene Schritt schief gegangen sein (WebStorms Subversion-Tools sind in dieser Hinsicht ziemlich schlecht), müssen Sie den letzten Schritt gegebenenfalls mit einem anderen Tool bewerkstelligen. Unter Windows ist Tortoise dafür recht gut geeignet.
  • Geben Sie folgende Befehle in das Web-Storm-Terminal ein:
    • grunt cssmin
    • grunt uglify
  • Es werden zwei neue Dateien erstellt: „web/css/main.css“ und „web/js/main.js“.
  • Stellen Sie diese Dateien unter Versionskontrolle: Rechtsklick auf die Datei → Subversion → Add to VCS.
  • Erstellen Sie für den Grunt-Task „watch“ einen WebStorm-Startup-Task:
    • File bzw. WebStorm → Settings bzw. Preferences → Tools → Startup Tasks
    • Klick auf grünes Plus-Icon → Add New Configuration → Grunt.js
    • Name: Watch, Tasks: watch → OK
  • Starten Sie WebStorm neu.
  • Nun sollte der Task „Watch“ laufen.

Sichern Sie Ihr Projekt im Repository:

  • Klick auf Subversion-Commit-Icon → Commit Message: Project ... created and initialized.→ Commit

Quellen

  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=WebStorm/Neues_Projekt_(HowTo)&oldid=41172“