WebStorm setup

WebStorm-setup

Setting up WebStorm
1. Download + Install webstorm (https://www.jetbrains.com/webstorm/) 
2. Download + Install NodeJS (https://nodejs.org/download/)
3. Download + Install Git (http://git-scm.com/downloads)
4. Install bower <npm i bower -g>
5. Add node and npm to your path:
	a. see http://stackoverflow.com/questions/21732447/bower-command-not-found-windows
	b. Paths to add "C:\Program Files (x86)\nodejs;C:\Users\{username}\AppData\Roaming\npm"
6. Restart WebStorm

Optional for ES6 features
7. Install traceur <npm i traceur-runtime -g>
8. Add traceur file watcher (https://www.youtube.com/watch?v=jbfkcmxLLKY)
   a. On windows use the settings:
      i. Program: C:\Program Files (x86)\nodejs\node.exe (your path to the node exe)
      ii.Add at the beginning of arguments: C:\Users\{username}\AppData\Roaming\npm\node_modules\traceur\traceur
9. Add JS hint: Change Settings > Langs & Frameworks > JS > Code Quality > JS Hint change the options:
  a. Enable, yes
  b. (Relax option) EcmaScript.next
10. Install traceur runtime on the local project: from the terminal (Alt + F12) run:
node C:\Users\{username}\AppData\Roaming\npm\node_modules\bower\bin\bower install jquery (same as 'bower install jquery' in linux)



Steps to Set up Karma + Jasmine
1. npm i -g jasmine
2. npm i -g karma
3. Add karma + jasmine syntax files:
   a. Settings > Languages & Frameworks > JS > Libraries > Add:
      i. jasmine-DefinitelyTyped
      ii.karma-jasmine-DefinitelyTyped
4. karma init karma.conf.js
5. Right click config > Create karma.conf.js
6. create a folder called 'src' or 'lib'
8. create a folder called 'test'
9. right click on all other folders in the directory and 'Mark as:' Excluded

Optional (Only needed if using browserify)
1. npm i --save-dev gulp
2. npm i --save-dev vinyl-source-stream
3. npm i --save-dev browserify
4. Mark node_modules as excluded
5. create gulpfile.js in project root:

"use strict";

// Include gulp
var gulp = require('gulp');

// Include plugins
var source      = require('vinyl-source-stream'); // makes browserify bundle compatible with gulp
var browserify  = require('browserify');


// Concatenate, Browserify & Minify JS
gulp.task('scripts', function() {
    return browserify('./test/mainSpec.js').bundle()
        .pipe(source('test-file.js'))
        .pipe(gulp.dest('./test-files/'));
});

gulp.task('default', ['scripts']);

8. create a file watcher for gulp:
	a. File > Settings > Tools > File Watchers
	b. Import watchers.xml



References: http://www.rexfeng.com/blog/2014/07/how-to-unit-test-your-js-and-use-it-in-the-browser/