Merge pull request #7 from formio/react-gulp-webpack-integration

Added the support for the webpack

Author: randallknutson

gulpfile.js

@@ -2,14 +2,19 @@
 'use strict';
 var gulp = require('gulp');
 var plugins = require('gulp-load-plugins')();
+var webpack_formio = require('./webpack-formio.config.js');
+var webpack_app = require('./webpack-app.config.js');
+
 plugins.source = require('vinyl-source-stream');
 plugins.browserify = require('browserify');
 plugins.watchify = require('watchify');
+plugins.webpack = require('webpack-stream');
 plugins.babelify = require('babelify');
 plugins.reactify = require('reactify');
 plugins.shim = require('browserify-shim');
 plugins.browserSync = require('browser-sync');
 
+
 gulp.task('clean', require('del').bind(null, ['dist/build']));
 gulp.task('copy', require('./gulp/copy')(gulp, plugins));
 gulp.task('watch', require('./gulp/watch')(gulp, plugins));
@@ -18,4 +23,6 @@ gulp.task('app', require('./gulp/app')(gulp, plugins));
 gulp.task('serve', require('./gulp/serve')(gulp, plugins));
 gulp.task('build', ['clean', 'scripts', 'app']);
 
-gulp.task('default', ['watch', 'serve']);
+gulp.task('webpack_formio', webpack_formio (gulp, plugins));
+gulp.task('webpack_app', webpack_app (gulp, plugins));
+gulp.task('build_webpack', ['clean', 'webpack_formio', 'webpack_app']);

package.json

@@ -34,6 +34,10 @@
     "react-widgets": "^3.3.1"
   },
   "devDependencies": {
+    "babel-core": "^6.9.1",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
     "babelify": "^6.3.0",
     "browser-sync": "^2.9.8",
     "browserify": "^13.0.0",
@@ -46,14 +50,16 @@
     "gulp-notify": "^2.2.0",
     "gulp-react": "^3.1.0",
     "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^1.6.0",
     "gulp-streamify": "^1.0.2",
     "gulp-uglify": "^1.4.1",
     "react": "^0.14.0",
     "react-dom": "^0.14.0",
     "react-transform-catch-errors": "^1.0.0",
     "reactify": "^1.1.1",
     "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.4.0"
+    "watchify": "^3.4.0",
+    "webpack-stream": "^3.2.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",

webpack-app.config.js

@@ -0,0 +1,49 @@
+var uglify = require('gulp-uglify');
+
+module.exports = function(gulp, plugins) {
+    return function () {
+        function handleErrors() {
+            var args = Array.prototype.slice.call(arguments);
+            plugins.notify.onError({
+                title: 'Compile Error',
+                message: '<%= error.message %>'
+            }).apply(this, args);
+            this.emit('end'); // Keep gulp from hanging on this task
+        }
+
+        return gulp.src('./src/app.js')
+            .pipe(plugins.webpack({
+                output: {
+                    filename: "app.js"
+                },
+                module: {
+                    loaders: [
+                        {
+                            test: /require\.js$/,
+                            loader: "exports?requirejs!script"
+                        },
+                        {
+                            test: /\.jsx?$/,
+                            loader: 'babel',
+                            exclude: /node_modules/,
+                            query: {
+                                presets: ['react', 'es2015']
+                            }
+                        }
+                    ],
+                    resolve: {
+                        extensions: ['', '.js', '.jsx'],
+                        alias: {
+                            requirejs$:  "./dist/example/"
+                        },
+                    },
+                    noParse: [
+                        /node_modules\/formiojs\//,
+                    ],
+
+                }
+            }))
+            .pipe(plugins.streamify(plugins.uglify()))
+            .pipe(gulp.dest('./dist/example/'));
+    }
+}

webpack-formio.config.js

@@ -0,0 +1,50 @@
+var uglify = require('gulp-uglify');
+
+module.exports = function(gulp, plugins) {
+    return function () {
+
+        function handleErrors() {
+            var args = Array.prototype.slice.call(arguments);
+            plugins.notify.onError({
+                title: 'Compile Error',
+                message: '<%= error.message %>'
+            }).apply(this, args);
+            this.emit('end'); // Keep gulp from hanging on this task
+        }
+
+        return gulp.src('./src/Formio.js')
+            .pipe(plugins.webpack({
+                output: {
+                    filename: "Formio.min.js"
+                },
+                module: {
+                    loaders: [
+                        {
+                            test: /require\.js$/,
+                            loader: "exports?requirejs!script"
+                        },
+                        {
+                            test: /\.jsx?$/,
+                            loader: 'babel',
+                            exclude: /node_modules/,
+                            query: {
+                                presets: ['react', 'es2015']
+                            }
+                        }
+                    ],
+                    resolve: {
+                        extensions: ['', '.js', '.jsx'],
+                        alias: {
+                            requirejs$:  "./dist/build/"
+                        },
+                    },
+                    noParse: [
+                        /node_modules\/formiojs\//,
+                    ],
+
+                }
+            }))
+            .pipe(plugins.streamify(plugins.uglify()))
+            .pipe(gulp.dest('./dist/build/'));
+    }
+}