Merge pull request #1 from zoeesilcock/feature/use-webpack

Feature/use webpack

.gitignore

@@ -2,15 +2,5 @@ node_modules/*
 bower_components/*
 .sass-cache/*
 
-tmp/app.js
-tmp/main.css
-tmp/main.css.map
-tmp/images
-tmp/audio
-
 public/app.js
 public/app.min.js
-public/main.css
-public/main.css.map
-public/images
-public/audio

Gruntfile.js

@@ -1,144 +1,52 @@
-var babelify = require('babelify');
+var webpack = require('webpack');
+var webpackConfig = require('./webpack.config.js');
 
 module.exports = function(grunt) {
+  grunt.loadNpmTasks('grunt-webpack');
+  grunt.loadNpmTasks('grunt-open');
+
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
-    uglify: {
-      my_target: {
-        files: {
-          'public/app.min.js': ['public/app.js']
-        }
-      }
-    },
-    // Images
-    copy: {
-      dev: {
-        files: [
-          {
-            expand: true,
-            cwd: 'images',
-            src: '**/*',
-            dest: 'tmp/images'
-          },
-          {
-            expand: true,
-            cwd: 'audio',
-            src: '**/*',
-            dest: 'tmp/audio'
-          },
-        ],
-      },
-      dist: {
-        files: [
-          {
-            expand: true,
-            cwd: 'images',
-            src: '**/*',
-            dest: 'public/images'
-          },
-          {
-            expand: true,
-            cwd: 'audio',
-            src: '**/*',
-            dest: 'public/audio'
-          },
-        ],
-      },
-    },
-    // Sass
-    sass: {
-      dev: {
-        files: {
-          'tmp/main.css': 'src/styles/main.scss'
-        }
-      },
-      dist: {
-        files: {
-          'public/main.css': 'src/styles/main.scss'
-        }
-      }
-    },
-    // Browserify
-    browserify: {
-      options: {
-        transform: [babelify],
-        debug: true
-      },
-      dev: {
-        src: './src/app.js',
-        dest: './tmp/app.js',
-      },
-      dist: {
-        src: './src/app.js',
-        dest: './public/app.js',
-      }
-    },
-    // Watch
-    watch: {
-      app: {
-        files: ['src/**/*.js', 'src/**/*.scss', 'images/**/*'],
-        tasks: ['browserify:dev', 'sass:dev', 'copy:dev']
-      },
-      options: {
-        livereload: true,
-        files: [
-          './src/app.js'
+    webpack: {
+      options: webpackConfig,
+      build: {
+        plugins: [
+          new webpack.DefinePlugin({
+            "process.env": {
+              "NODE_ENV": JSON.stringify("production")
+            }
+          }),
+          new webpack.optimize.DedupePlugin(),
+          new webpack.optimize.UglifyJsPlugin({
+            minimize: true,
+            compress: {
+              warnings: false
+            }
+          })
         ]
       }
     },
-    // Connect
-    connect: {
+    'webpack-dev-server': {
       options: {
-        port: 8000,
-        hostname: 'localhost',
-        livereload: true
+        webpack: webpackConfig
       },
-      livereload: {
-        options: {
-          livereload: true,
-          base: {
-            path: 'tmp'
-          }
+      start: {
+        keepAlive: true,
+        contentBase: 'public',
+        webpack: {
+          devtool: 'eval',
+          debug: true
         }
       }
     },
-    // Open
     open: {
-      server: {
-        url: 'http://<%= connect.options.hostname %>:<%= connect.options.port %>'
+      default: {
+        path: 'http://localhost:8080/',
+        app: 'Google Chrome'
       }
     }
   });
 
-  grunt.registerTask('serve', function(target) {
-    grunt.task.run([
-      'connect:livereload',
-      'sass:dev',
-      'copy:dev',
-      'browserify:dev',
-      'open',
-      'watch:app'
-    ]);
-  });
-
-  grunt.registerTask('dist', function(target) {
-    grunt.task.run([
-      'sass:dist',
-      'copy:dist',
-      'browserify:dist',
-      'uglify'
-    ]);
-  });
-
-  grunt.registerTask('default', ['serve']);
-  grunt.registerTask('build', ['dist']);
-
-  grunt.loadNpmTasks('grunt-browserify');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-copy');
-  grunt.loadNpmTasks('grunt-contrib-connect');
-  grunt.loadNpmTasks('grunt-open');
-  grunt.loadNpmTasks('grunt-notify');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.registerTask('default', ['webpack-dev-server:start', 'open:dev']);
+  grunt.registerTask('build', ['webpack:build']);
 };

package.json

@@ -21,21 +21,20 @@
   },
   "homepage": "https://github.com/zoeesilcock/mobtimer-react",
   "devDependencies": {
-    "babelify": "^6.0.2",
+    "babel-core": "^5.8.21",
+    "babel-loader": "^5.3.2",
+    "classnames": "^2.1.1",
+    "css-loader": "^0.15.6",
     "grunt": "^0.4.5",
-    "grunt-browserify": "^3.7.0",
-    "grunt-contrib-connect": "^0.10.1",
-    "grunt-contrib-copy": "^0.8.0",
-    "grunt-contrib-sass": "^0.9.2",
-    "grunt-contrib-uglify": "^0.9.1",
-    "grunt-contrib-watch": "^0.6.1",
-    "grunt-notify": "^0.4.1",
     "grunt-open": "^0.2.3",
+    "grunt-webpack": "^1.0.11",
+    "moment": "~2.10.2",
+    "node-sass": "^3.2.0",
     "react": "^0.13.1",
-    "reflux": "^0.2.7"
-  },
-  "dependencies": {
-    "classnames": "^2.1.1",
-    "moment": "~2.10.2"
+    "reflux": "^0.2.7",
+    "sass-loader": "^2.0.0",
+    "style-loader": "^0.12.3",
+    "webpack": "^1.11.0",
+    "webpack-dev-server": "^1.10.1"
   }
 }

public/index.html

@@ -5,9 +5,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Mob Timer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link rel="stylesheet" href="main.css">
 </head>
 <body>
-    <script src="app.min.js"></script>
+  <script src="app.js"></script>
 </body>
 </html>

src/app.js

@@ -1,3 +1,5 @@
+require('./styles/main.scss');
+
 import React from 'react';
 import Reflux from 'reflux';
 

webpack.config.js

@@ -0,0 +1,26 @@
+var path = require('path');
+
+module.exports = {
+  entry: {
+    app: ['./src/app.js']
+  },
+  output: {
+    path: path.join(__dirname, 'public'),
+    publicPath: '/',
+    filename: 'app.js'
+  },
+  module: {
+    loaders: [
+    {
+      test: /\.scss$/,
+      loader: 'style!css!sass!'
+    },
+    {
+      test: /\.js$/,
+      loaders: [
+        'babel-loader'
+      ],
+      exclude: path.join(__dirname, 'node_modules')
+    } ]
+  }
+};