diff --git a/.gitignore b/.gitignore index e02ef7b..a529588 100644 --- a/.gitignore +++ b/.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 diff --git a/Gruntfile.js b/Gruntfile.js index 5483df5..5500925 100644 --- a/Gruntfile.js +++ b/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']); }; diff --git a/package.json b/package.json index acf52ec..5d37ec5 100644 --- a/package.json +++ b/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" } } diff --git a/audio/music_box.mp3 b/public/audio/music_box.mp3 similarity index 100% rename from audio/music_box.mp3 rename to public/audio/music_box.mp3 diff --git a/audio/music_box.wav b/public/audio/music_box.wav similarity index 100% rename from audio/music_box.wav rename to public/audio/music_box.wav diff --git a/images/github_mark.png b/public/images/github_mark.png similarity index 100% rename from images/github_mark.png rename to public/images/github_mark.png diff --git a/public/index.html b/public/index.html index 5936638..eee9b46 100644 --- a/public/index.html +++ b/public/index.html @@ -5,9 +5,8 @@ Mob Timer - - + diff --git a/src/app.js b/src/app.js index 9b005d7..1aa3cda 100644 --- a/src/app.js +++ b/src/app.js @@ -1,3 +1,5 @@ +require('./styles/main.scss'); + import React from 'react'; import Reflux from 'reflux'; diff --git a/tmp/index.html b/tmp/index.html deleted file mode 100644 index ec0b86e..0000000 --- a/tmp/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Mob Timer - - - - - - - diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..c758065 --- /dev/null +++ b/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') + } ] + } +};