Quelltext der Seite WebStorm/Neues Projekt (HowTo)

'''veraltet'''
{{Qualität
|correctness         = 3
|extent                = 2
|numberOfReferences  = 3
|qualityOfReferences = 3
|conformance         = 5
}}

==Voraussetzung==

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

<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>Create</code>

Mit Subversion koppeln:
* <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).
* 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>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:
* 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==

# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}


[[Kategorie:IDE]]
[[Kategorie:HowTo]]