chore(build): Move to webpack for bundling/building

.gitignore

@@ -5,3 +5,4 @@ npm-debug.log
 coverage
 aws-credentials.json
 .awspublish*
+stats.json

.stylelintrc

@@ -1,6 +1,6 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "indentation": [4, [4]]
+    "indentation": 4
   }
 }

package.json

@@ -6,37 +6,41 @@
   "license": "MIT",
   "repository": "https://github.com/NiXXeD/chatty",
   "scripts": {
-    "build": "gulp clean && gulp build",
-    "watch": "gulp",
-    "start": "npm run build && gulp server"
+    "start": "webpack-dev-server --progress --colors --display-error-details --inline",
+    "build": "webpack",
+    "stats": "webpack --profile --json > stats.json",
+    "server": "http-server build --cors -p 3000"
+  },
+  "engines": {
+    "node": ">= 4.2.1 <= 5",
+    "npm": ">= 2 <= 3"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.1",
-    "browser-sync": "2.11.0",
-    "concurrently": "1.0.0",
-    "cssnano": "3.4.0",
-    "del": "2.2.0",
+    "angular2": "2.0.0-beta.0",
     "es6-promise": "3.0.2",
     "es6-shim": "0.33.3",
-    "gulp": "3.9.0",
-    "gulp-concat": "2.6.0",
-    "gulp-postcss": "6.0.1",
-    "gulp-rename": "1.2.2",
-    "gulp-sourcemaps": "1.6.0",
-    "gulp-typescript": "2.10.0",
-    "gulp-util": "3.0.7",
-    "lodash": "3.10.1",
-    "merge2": "0.3.6",
-    "postcss-discard-comments": "2.0.3",
-    "postcss-reporter": "1.3.0",
-    "precss": "1.4.0",
-    "reflect-metadata": "0.1.2",
-    "require-directory": "2.1.1",
+    "es7-reflect-metadata": "1.5.5",
     "rxjs": "5.0.0-beta.0",
-    "stylelint": "3.2.3",
-    "stylelint-config-standard": "0.2.0",
-    "systemjs": "0.19.16",
+    "zone.js": "0.5.10",
+    "lodash": "3.10.1"
+  },
+  "devDependencies": {
+    "clean-webpack-plugin": "0.1.8",
+    "copy-webpack-plugin": "0.3.3",
+    "css-loader": "0.23.1",
+    "extract-text-webpack-plugin": "1.0.1",
+    "html-webpack-plugin": "2.7.2",
+    "http-server": "0.8.5",
+    "postcss-loader": "0.8.0",
+    "precss": "1.4.0",
+    "raw-loader": "0.5.1",
+    "style-loader": "0.13.0",
+    "stylelint": "4.3.3",
+    "stylelint-config-standard": "3.0.0",
+    "ts-loader": "0.8.0",
     "typescript": "1.7.5",
-    "zone.js": "0.5.10"
+    "webpack": "1.12.12",
+    "webpack-dev-server": "1.14.1",
+    "webpack-merge": "0.7.3"
   }
 }

readme.md

@@ -7,7 +7,7 @@ Features above standard chatty:
 * Reflow action: Re-sorts the chatty instantly, active posts on top, no http call required.
 * Live filtering. No more reposts! Filter works without API call in the background (against live threads only).
 * Content embed in-post for: raw images, imgur (gifv, albums), gfycat, youtube, vimeo.
-* Tabs support: 
+* Tabs support:
   * Save a post, author, filter, etc for later quick filtering.
   * Default tabs include: Chatty (all threads), Frontpage (Shacknews posts), Mine (threads containing your username)
 * Collapsed post ids are stored in the cloud. Compatible with any other WinChatty V2 cloud collapse using app.
@@ -19,7 +19,7 @@ http://chatty.nixxed.com
 ##### How to run:
 ---------
 Notes
-  1. Uses browser-sync, IE not a real web server
+  1. Uses webpack-dev-server, not a real web server
   2. Access it at http://localhost:3000
 ~~~~
 npm start
@@ -34,6 +34,15 @@ Notes:
 npm run build
 ~~~~
 
+##### How to test production build locally:
+---------
+Notes:
+  1. Hosts whatever is in the 'build' directory
+  2. Access it at http://localhost:3000
+~~~~
+npm run server
+~~~~
+
 ##### Technology Used
 ---------------------
 

src/main/app/chatty/SimpleChatty.ts

@@ -9,7 +9,7 @@ import {Thread} from '../thread/Thread'
 import {Toast} from '../toast/Toast'
 
 @Component({
-    templateUrl: 'app/chatty/simpleChatty.html',
+    template: require('./simpleChatty.html'),
     directives: [Navbar, Post, Thread, Toast]
 })
 export class SimpleChatty implements OnInit {

src/main/app/chatty/SplitChatty.ts

@@ -8,8 +8,11 @@ import {Post} from '../post/Post'
 import {Thread} from '../thread/Thread'
 import {Toast} from '../toast/Toast'
 
+import './body.scss';
+import './chatty.scss';
+
 @Component({
-    templateUrl: 'app/chatty/splitChatty.html',
+    template: require('./splitChatty.html'),
     directives: [Navbar, Post, Thread, Toast]
 })
 export class SplitChatty implements OnInit {

src/main/app/comments/Comments.ts

@@ -6,9 +6,11 @@ import {Post} from '../post/Post'
 import {ReplyBox} from '../replybox/ReplyBox'
 import {ScrollIntoView} from '../directives/ScrollIntoView'
 
+import './comments.scss';
+
 @Component({
     selector: 'comments',
-    templateUrl: './app/comments/comments.html',
+    template: require('./comments.html'),
     directives: [Comments, Post, ReplyBox, ScrollIntoView]
 })
 export class Comments {

src/main/app/embedContent/EmbedContent.ts

@@ -3,7 +3,7 @@ import {Component, Input} from 'angular2/core'
 
 @Component({
     selector: 'embed-content',
-    templateUrl: 'app/embedContent/embedContent.html'
+    template: require('./embedContent.html')
 })
 export class EmbedContent {
     public visible = false

src/main/app/navbar/Navbar.ts

@@ -9,9 +9,11 @@ import {TabService} from '../services/TabService'
 import {ModelService} from '../services/ModelService'
 import {ReplyBox} from '../replybox/ReplyBox'
 
+import './navbar.scss';
+
 @Component({
     selector: 'navbar',
-    templateUrl: 'app/navbar/navbar.html',
+    template: require('./navbar.html'),
     directives: [DisableHotkeys, ReplyBox]
 })
 export class Navbar implements OnInit {

src/main/app/post/Post.ts

@@ -4,9 +4,13 @@ import {SettingsService} from '../services/SettingsService'
 import {TabService} from '../services/TabService'
 import {EmbedContent} from '../embedContent/EmbedContent'
 
+import './post.scss';
+import './shacktags.scss';
+import './tags.scss';
+
 @Component({
     selector: 'post',
-    templateUrl: 'app/post/post.html',
+    template: require('./post.html'),
     directives: [EmbedContent]
 })
 export class Post {

src/main/app/replybox/ReplyBox.ts

@@ -5,9 +5,12 @@ import {PostService} from '../services/PostService'
 import {AutoFocus} from '../directives/AutoFocus'
 import {DisableHotkeys} from '../directives/DisableHotkeys'
 
+import './replybox.scss';
+import './tagLegend.scss';
+
 @Component({
     selector: 'replybox',
-    templateUrl: 'app/replybox/replybox.html',
+    template: require('./replybox.html'),
     directives: [AutoFocus, DisableHotkeys]
 })
 export class ReplyBox {