WebStorm/Neues Projekt (HowTo)

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:
  • 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 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)