Moving external libraries to the install step and into a seperate bundle

4 files changed, 32 insertions, 29 deletions

diff --git a/.gitignore b/.gitignore
index ebd5e4342..fc9076e69 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,8 @@ node_modules
 dist
 npm-debug.log
 
-bundle*.js
+web/static/js/bundle*.js
+web/static/js/libs*.js
 model/version.go
 model/version.go.bak
 
diff --git a/Makefile b/Makefile
index 8d6d30735..b03ed5cba 100644
--- a/Makefile
+++ b/Makefile
@@ -43,6 +43,7 @@ travis:
 	@$(GO) clean $(GOFLAGS) -i ./...
 
 	@cd web/react/ && npm install
+	cd web/react/ && npm run build-libs
 
 	@echo Checking for style guide compliance
 	cd web/react && $(ESLINT) --quiet components/* dispatcher/* pages/* stores/* utils/*
@@ -83,10 +84,11 @@ travis:
 	mkdir -p web/static/js
 	cd web/react && npm run build
 
-	cd web/sass-files && compass compile
+	cd web/sass-files && compass compile -e production --force
 
-	mkdir -p $(DIST_PATH)/web
-	cp -RL web/static $(DIST_PATH)/web
+	mkdir -p $(DIST_PATH)/web/static/js
+	cp -L web/static/js/*.min.js $(DIST_PATH)/web/static/js/
+	cp -RL web/static/js/jquery-dragster $(DIST_PATH)/web/static/js/
 	cp -RL web/templates $(DIST_PATH)/web
 
 	mkdir -p $(DIST_PATH)/api
@@ -97,6 +99,7 @@ travis:
 	cp README.md $(DIST_PATH)
 
 	mv $(DIST_PATH)/web/static/js/bundle.min.js $(DIST_PATH)/web/static/js/bundle-$(BUILD_NUMBER).min.js
+	mv $(DIST_PATH)/web/static/js/libs.min.js $(DIST_PATH)/web/static/js/libs-$(BUILD_NUMBER).min.js
 
 	@sed -i'.bak' 's|react-with-addons-0.13.3.js|react-with-addons-0.13.3.min.js|g' $(DIST_PATH)/web/templates/head.html
 	@sed -i'.bak' 's|jquery-1.11.1.js|jquery-1.11.1.min.js|g' $(DIST_PATH)/web/templates/head.html
@@ -104,6 +107,7 @@ travis:
 	@sed -i'.bak' 's|react-bootstrap-0.25.1.js|react-bootstrap-0.25.1.min.js|g' $(DIST_PATH)/web/templates/head.html
 	@sed -i'.bak' 's|perfect-scrollbar.js|perfect-scrollbar.min.js|g' $(DIST_PATH)/web/templates/head.html
 	@sed -i'.bak' 's|bundle.js|bundle-$(BUILD_NUMBER).min.js|g' $(DIST_PATH)/web/templates/head.html
+	@sed -i'.bak' 's|libs.min.js|libs-$(BUILD_NUMBER).min.js|g' $(DIST_PATH)/web/templates/head.html
 	rm $(DIST_PATH)/web/templates/*.bak
 
 	mv doc/README.md doc/index.md
@@ -129,6 +133,7 @@ install:
 	fi
 
 	@cd web/react/ && npm install
+	@cd web/react/ && npm run build-libs
 
 check: install
 	@echo Running ESLint...
@@ -185,6 +190,7 @@ clean:
 
 	rm -rf web/react/node_modules
 	rm -f web/static/js/bundle*.js
+	rm -f web/static/js/libs*.js
 	rm -f web/static/css/styles.css
 
 	rm -rf data/*
@@ -257,7 +263,7 @@ dist: install
 	mkdir -p web/static/js
 	cd web/react && npm run build
 
-	cd web/sass-files && compass compile
+	cd web/sass-files && compass compile -e production --force
 
 	mkdir -p $(DIST_PATH)/web
 	cp -RL web/static $(DIST_PATH)/web
@@ -271,6 +277,7 @@ dist: install
 	cp README.md $(DIST_PATH)
 
 	mv $(DIST_PATH)/web/static/js/bundle.min.js $(DIST_PATH)/web/static/js/bundle-$(BUILD_NUMBER).min.js
+	mv $(DIST_PATH)/web/static/js/libs.min.js $(DIST_PATH)/web/static/js/libs-$(BUILD_NUMBER).min.js
 
 	@sed -i'.bak' 's|react-with-addons-0.13.3.js|react-with-addons-0.13.3.min.js|g' $(DIST_PATH)/web/templates/head.html
 	@sed -i'.bak' 's|jquery-1.11.1.js|jquery-1.11.1.min.js|g' $(DIST_PATH)/web/templates/head.html
@@ -278,6 +285,7 @@ dist: install
 	@sed -i'.bak' 's|react-bootstrap-0.25.1.js|react-bootstrap-0.25.1.min.js|g' $(DIST_PATH)/web/templates/head.html
 	@sed -i'.bak' 's|perfect-scrollbar.js|perfect-scrollbar.min.js|g' $(DIST_PATH)/web/templates/head.html
 	@sed -i'.bak' 's|bundle.js|bundle-$(BUILD_NUMBER).min.js|g' $(DIST_PATH)/web/templates/head.html
+	@sed -i'.bak' 's|libs.min.js|libs-$(BUILD_NUMBER).min.js|g' $(DIST_PATH)/web/templates/head.html
 	rm $(DIST_PATH)/web/templates/*.bak
 
 	tar -C dist -czf $(DIST_PATH).tar.gz mattermost
diff --git a/web/react/package.json b/web/react/package.json
index a097b6aa8..e6a662375 100644
--- a/web/react/package.json
+++ b/web/react/package.json
@@ -5,7 +5,6 @@
   "dependencies": {
     "autolinker": "0.18.1",
     "babel-runtime": "5.8.24",
-    "bootstrap-colorpicker": "2.2.0",
     "flux": "2.1.1",
     "keymirror": "0.1.1",
     "marked": "0.3.5",
@@ -13,18 +12,18 @@
     "twemoji": "1.4.1"
   },
   "devDependencies": {
-    "browserify": "11.0.1",
-    "envify": "3.4.0",
-    "babelify": "6.1.3",
+    "browserify": "11.2.0",
+    "babelify": "6.3.0",
     "uglify-js": "2.4.24",
-    "watchify": "3.3.1",
+    "watchify": "3.4.0",
     "eslint": "1.6.0",
     "eslint-plugin-react": "3.5.1"
   },
   "scripts": {
-    "start": "watchify --extension=jsx -o ../static/js/bundle.js -v -d ./**/*.jsx",
-    "build": "NODE_ENV=production browserify ./**/*.jsx | uglifyjs -c -m --screw-ie8 > ../static/js/bundle.min.js",
-    "test": "jest"
+    "check": "",
+    "build-libs": "browserify -r crypto -r autolinker -r flux -r keymirror -r marked -r object-assign -r twemoji | uglifyjs -c -m --screw-ie8 > ../static/js/libs.min.js",
+    "start": "watchify --fast -x crypto -x node -x autolinker -x flux -x keymirror -x marked -x object-assign -x twemoji -o ../static/js/bundle.js -v -d ./**/*.jsx",
+    "build": "browserify -x crypto -x autolinker -x flux -x keymirror -x marked -x object-assign -x twemoji ./**/*.jsx | uglifyjs -c -m --screw-ie8 > ../static/js/bundle.min.js"
   },
   "browserify": {
     "transform": [
@@ -35,11 +34,7 @@
             "runtime"
           ]
         }
-      ],
-      "envify"
+      ]
     ]
-  },
-  "jest": {
-    "rootDir": "."
   }
 }
diff --git a/web/templates/head.html b/web/templates/head.html
index faac4975a..8039f48a1 100644
--- a/web/templates/head.html
+++ b/web/templates/head.html
@@ -1,6 +1,6 @@
 {{define "head"}}
 <head>
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="robots" content="noindex, nofollow">
 
     <title>{{ .Props.Title }}</title>
@@ -22,24 +22,22 @@
         window.config = {{ .ClientProps }};
     </script>
 
-
+    <!-- CSS Should always go first -->
     <link rel="stylesheet" href="/static/css/bootstrap-3.3.5.min.css">
-    <link rel="stylesheet" href="/static/css/jasny-bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/bootstrap-colorpicker.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/jasny-bootstrap.min.css">
+    <link rel="stylesheet" href="/static/css/bootstrap-colorpicker.min.css">
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <link rel="stylesheet" href="/static/css/google-fonts.css">
+
+    <link id="favicon" rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
 
     <script src="/static/js/react-with-addons-0.13.3.js"></script>
     <script src="/static/js/jquery-1.11.1.js"></script>
     <script src="/static/js/bootstrap-3.3.5.js"></script>
     <script src="/static/js/bootstrap-colorpicker.min.js"></script>
     <script src="/static/js/react-bootstrap-0.25.1.js"></script>
-
-    <link id="favicon" rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
-    <link href='/static/css/google-fonts.css' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="/static/css/styles.css">
-
     <script src="/static/js/perfect-scrollbar-0.6.5.jquery.js"></script>
-
     <script src="/static/js/jquery-dragster/jquery.dragster.js"></script>
 
     <style id="antiClickjack">body{display:none !important;}</style>
@@ -60,6 +58,7 @@
         }
     </script>
 
+    <script src="/static/js/libs.min.js"></script>
     <script src="/static/js/bundle.js"></script>
 
     <script type="text/javascript">