Replaced gulp with webpack

HZSamir · Aug 10, 2015 · 46f0e27 · 46f0e27
1 parent a16c8a3
commit 46f0e27
Show file tree

Hide file tree

Showing 22 changed files with 207 additions and 286 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -15,17 +15,18 @@ Now you can run your local server:
 ```
 npm start
 ```
-#Description of [Gulp](https://github.com/gulpjs/gulp) Plugins
-
-
-##[browserify](https://github.com/substack/node-browserify) 
-Browsers do not allow us to use the require method from Node.js. With browserify, we can implement dependency management on the browser. It also will bundle the code into one file in an efficient way to not repeat dependiencies that are used more than once. 
-
-##[browserSync](http://www.browsersync.io/)
-When developing and testing the website, browserSync is a powerful tool that will rebuild and refresh the webpage so you can see the changes you make as you are working. 
-
-##markup
-Copies all of the files from /src/www to the build folder. 
-
-##[gulp_starter](https://github.com/greypants/gulp-starter)
-A useful repository that explains how many of gulp's features work and contains an example project to get familiar with it. We use this example to construct our own project.
+Open http://localhost:3000 to view the documentation site.
+#Description of [Webpack](http://webpack.github.io/docs/)
+Webpack is a module bundler that we are using to run our documentation site. This is a quick overview of how the configuration file works.
+##Webpack Configuration:
+###Entry:
+Webpack creates entry points for the application to know where it starts.
+###Resolve:
+Webpack uses this configuration options to determine how it will deal with requiring files. For example, when the extension is omitted in a require, Webpack will look at the extensions option and try applying one of those.
+###Output:
+This is where the bundled project will go to and any other files necessary for it to run.
+###Plugins:
+These are plugins Webpack uses for more functionality. The HTML Webpack Plugin, for example, will add the index.html to your build folder.
+###Modules:
+Modules and other things that are required will usually need to be loaded and interpreted by Webpack when bundling, and this is where Webpack looks for the different loaders.
+*Loading .js files in es6 and es7 will require a loader like babel-loader to interpret the files into es5.
diff --git a/docs/gulp/config.js b/docs/gulp/config.js
diff --git a/docs/gulp/tasks/browserSync.js b/docs/gulp/tasks/browserSync.js
diff --git a/docs/gulp/tasks/browserify.js b/docs/gulp/tasks/browserify.js
diff --git a/docs/gulp/tasks/build.js b/docs/gulp/tasks/build.js
diff --git a/docs/gulp/tasks/css.js b/docs/gulp/tasks/css.js
diff --git a/docs/gulp/tasks/default.js b/docs/gulp/tasks/default.js
diff --git a/docs/gulp/tasks/eslint.js b/docs/gulp/tasks/eslint.js
diff --git a/docs/gulp/tasks/fontIcons.js b/docs/gulp/tasks/fontIcons.js
diff --git a/docs/gulp/tasks/markup.js b/docs/gulp/tasks/markup.js
diff --git a/docs/gulp/tasks/setWatch.js b/docs/gulp/tasks/setWatch.js
diff --git a/docs/gulp/tasks/watch.js b/docs/gulp/tasks/watch.js
diff --git a/docs/gulp/util/bundleLogger.js b/docs/gulp/util/bundleLogger.js
diff --git a/docs/gulp/util/handleErrors.js b/docs/gulp/util/handleErrors.js
diff --git a/docs/gulpfile.js b/docs/gulpfile.js
diff --git a/docs/package.json b/docs/package.json
@@ -7,26 +7,15 @@
     "url": "https://github.com/callemall/material-ui.git"
   },
   "scripts": {
-    "start": "gulp"
-  },
-  "devDependencies": {
-    "babelify": "^6.1.1",
-    "browser-sync": "^1.8.1",
-    "browserify": "^10.2.0",
-    "gulp": "^3.8.10",
-    "gulp-eslint": "^0.15.0",
-    "gulp-notify": "^2.1.0",
-    "gulp-shell": "^0.4.1",
-    "gulp-sourcemaps": "1.5.2",
-    "gulp-util": "^3.0.1",
-    "pretty-hrtime": "^0.2.2",
-    "require-dir": "^0.1.0",
-    "underscore": "^1.7.0",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.0.0",
-    "watchify": "^2.2.1"
+    "prestart": "webpack-dev-server --config webpack-dev-server.config.js --progress --colors --inline",
+    "start": "open http://localhost:3000",
+    "build": "webpack --config webpack-production.config.js --progress --colors --profile"
   },
   "dependencies": {
     "highlight.js": "^8.4.0"
+  },
+  "devDependencies": {
+    "webpack": "^1.11.0",
+    "webpack-dev-server": "^1.10.1"
   }
 }
diff --git a/docs/src/app/app.jsx b/docs/src/app/app.jsx
@@ -27,7 +27,7 @@
     // This is our callback function, whenever the url changes it will be called again.
     // Handler: The ReactComponent class that will be rendered
     .run(function (Handler) {
-      React.render(<Handler/>, document.body);
+      React.render(<Handler/>, document.getElementById('app'));
     });
 
 })();
diff --git a/docs/src/www/index.html b/docs/src/www/index.html
@@ -28,7 +28,9 @@
       s.parentNode.insertBefore(wf, s);
     })();
   </script>
-  <script src="app.js"></script>
+  <div id='app'>
+    <script src="app.js"></script>
+  <div>
 </body>
 
 </html>