title: React + Gulp + Babelify
body: <p>I am trying to convert my working app from React and Gulp with ES5 to React + Gulp and ES6.</p>
  
  <p>I only tried to replace reactify with babelify but i am still getting gulp error:  Illegal import declaration</p>
  
  <p>Here is my gulpfile.js:</p>
  
  <pre><code>"use strict";
  
      var gulp = require('gulp');
      var connect = require('gulp-connect'); //Runs a local dev server
      var open = require('gulp-open'); //Open a URL in a web browser
      var browserify = require('browserify'); // Bundles JS
      var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
      var concat = require('gulp-concat'); //Concatenates files
      var lint = require('gulp-eslint'); //Lint JS files, including JSX
      var babelify = require("babelify");
  
      var config = {
          port: 9005,
          devBaseUrl: 'http://localhost',
          paths: {
              html: './src/*.html',
              js: './src/**/*.js',
              css: [
                  'node_modules/bootstrap/dist/css/bootstrap.min.css',
                  'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
                  'node_modules/toastr/toastr.css'
              ],
              dist: './dist',
              mainJs: './src/main.js'
          }
      }
  
      //Start a local development server
      gulp.task('connect', function() {
          connect.server({
              root: ['dist'],
              port: config.port,
              base: config.devBaseUrl,
              livereload: true
          });
      });
  
      gulp.task('open', ['connect'], function() {
          gulp.src('dist/index.html')
              .pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/'}));
      });
  
      gulp.task('html', function() {
          gulp.src(config.paths.html)
              .pipe(gulp.dest(config.paths.dist))
              .pipe(connect.reload());
      });
  
      gulp.task('js', function() {
          browserify(config.paths.mainJs)
              .transform(babelify)
              .bundle()
              .on('error', console.error.bind(console))
              .pipe(source('bundle.js'))
              .pipe(gulp.dest(config.paths.dist + '/scripts'))
              .pipe(connect.reload());
      });
  
      gulp.task('css', function() {
          gulp.src(config.paths.css)
              .pipe(concat('bundle.css'))
              .pipe(gulp.dest(config.paths.dist + '/css'));
      });
  
      gulp.task('lint', function() {
          return gulp.src(config.paths.js)
              .pipe(lint({config: 'eslint.config.json'}))
              .pipe(lint.format());
      });
  
      gulp.task('watch', function() {
          gulp.watch(config.paths.html, ['html']);
          gulp.watch(config.paths.js, ['js', 'lint']);
      });
  
      gulp.task('default', ['html', 'js', 'css', 'lint', 'open', 'watch']);
  </code></pre>
  
  <p>and this is my js file (main.js):</p>
  
  <pre><code>"use strict";
  
  var React = require('react');
  var Router = require('react-router');
  var routes = require('./routes');
  import React from 'react';
  
  Router.run(routes, function(Handler) {
    React.render(&lt;Handler/&gt;, document.getElementById('app'));
  });
  </code></pre>
  
  <p>Thanks a lot</p>