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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Die Seite wurde neu angelegt: „{{Qualität |correctness = 3 |extent = 2 |numberOfReferences = 3 |qualityOfReferences = 3 |conformance = 5 }} {{In Bearbeitung…“
 
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
 
(12 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
'''veraltet'''
{{Qualität
{{Qualität
|correctness        = 3
|correctness        = 3
Zeile 7: Zeile 8:
}}
}}


{{In Bearbeitung}}
==Voraussetzung==


==Erstellen eines neuen Projektes==
Auf dem Entwicklungsrechner muss [[Node.js]] installiert worden sein. Folgende Node.js-Pakete müssen existieren:


* <code>File</code> bzw. </code>WebStorm</code>  → </code>Project</code>  → </code>Empty Project</code>   
<source lang="bash">
npm install -g bower grunt-cli jsdoc ink-docstrap yuglify mincss coffee-script jshint
</source>
 
(Details: siehe [[HTML5-Tutorium: JavaScript: Hello World 04]])
 
==Erstellen eines neuen Projekts==
 
* <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:
* Entpacken Sie folgendes Template-Projekt:
** [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/empty/WK_Empty_Project_Grunt.zip WK_Empty_Project_Grunt.zip] (Einfaches Projekt mit Grunt-Unterstützung)
* Fügen Sie die entpackten Dateien in das Wurzelverzeichnis Ihres Projekts ein.
** 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 Pfade, dies Sie nicht in Ihrem Subversion-Repository speichern wollen (evtl. „<code>doc</code>“) und drücken Sie dann <code>OK</code>.
Inhalte der Dateien anpassen:
* Passen Sie in folgenden Dateien die Inhalte an Ihre Gegebenheiten an:
** <code>package.json</code> (zumindest <code>name</code>, <code>description</code>, <code>url</code> und <code>author</code>)
** <code>gruntfile.js</code> (zumindest <code>@author</code>, <code>@copyright</code>, <code>@license</code> und <code>Created on</code>)
** <code>src/js/main.js</code> (zumindest <code>@author</code>, <code>@copyright</code>, <code>@license</code> und <code>Created on</code>)
** <code>web/index.html</code> (zumindest <code>title</code>)
** <code>conf/jsdoc.js</code> (zumindest <code>systemName</code> und <code>copyright</code>)
* Den Ordner „<code>doc</code>“ sollten Sie von der Code-Überwachung ausschließen: Rechtsklick auf „<code>doc</code>“ → <code>Marc Directory as</code> → <code>Excluded</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==

Aktuelle Version vom 1. März 2023, 13:07 Uhr

veraltet

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)

Voraussetzung

Auf dem Entwicklungsrechner muss Node.js installiert worden sein. Folgende Node.js-Pakete müssen existieren: 

npm install -g bower grunt-cli jsdoc ink-docstrap yuglify mincss coffee-script jshint

(Details: siehe HTML5-Tutorium: JavaScript: Hello World 04)

Erstellen eines neuen Projekts

  • 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 folgendes Template-Projekt:
  • Fügen Sie die entpackten Dateien in das Wurzelverzeichnis Ihres Projekts 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 (evtl. „doc“) und drücken Sie dann OK.

Inhalte der Dateien anpassen:

  • Passen Sie in folgenden Dateien die Inhalte an Ihre Gegebenheiten an:
    • package.json (zumindest name, description, url und author)
    • gruntfile.js (zumindest @author, @copyright, @license und Created on)
    • src/js/main.js (zumindest @author, @copyright, @license und Created on)
    • web/index.html (zumindest title)
    • conf/jsdoc.js (zumindest systemName und copyright)
  • Den Ordner „doc“ sollten Sie von der Code-Überwachung ausschließen: Rechtsklick auf „doc“ → Marc Directory as → Excluded.

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=51291“