title: Can't use es6 in gulpfile
body: <p>I am trying to write my gulpfile.babel.js in ES6, but running the script gives errors.</p>
  
  <p>package.json:</p>
  
  <pre><code>{
  "dependencies": {
      "async": "^2.1.2",
      "bcrypt-nodejs": "^0.0.3",
      "body-parser": "^1.15.2",
      "browser-sync": "^2.18.2",
      "chalk": "^1.1.3",
      "cheerio": "^0.22.0",
      "clockwork": "^0.1.4",
      "compression": "^1.6.2",
      "connect-mongo": "^1.3.2",
      "dotenv": "^2.0.0",
      "errorhandler": "^1.4.3",
      "express": "^4.14.0",
      "express-flash": "^0.0.2",
      "express-session": "^1.14.2",
      "express-status-monitor": "^0.1.5",
      "express-validator": "^2.21.0",
      "fbgraph": "^1.3.0",
      "github": "^6.0.2",
      "instagram-node": "^0.5.8",
      "lastfm": "^0.9.2",
      "lob": "^3.9.0",
      "lodash": "^4.16.6",
      "lusca": "^1.4.1",
      "mongoose": "^4.6.6",
      "morgan": "^1.7.0",
      "multer": "^1.2.0",
      "node-foursquare": "^0.3.0",
      "node-linkedin": "^0.5.4",
      "node-sass-middleware": "^0.9.8",
      "nodemailer": "^2.6.4",
      "passport": "0.3.2",
      "passport-facebook": "^2.1.1",
      "passport-github": "^1.1.0",
      "passport-google-oauth": "^1.0.0",
      "passport-instagram": "^1.0.0",
      "passport-linkedin-oauth2": "^1.4.1",
      "passport-local": "^1.0.0",
      "passport-oauth": "^1.0.0",
      "passport-openid": "^0.4.0",
      "passport-twitter": "^1.0.4",
      "paypal-rest-sdk": "^1.7.0",
      "pug": "^2.0.0-beta6",
      "request": "^2.78.0",
      "stripe": "^4.12.0",
      "tumblr.js": "^1.1.1",
      "twilio": "^3.3.1-edge",
      "twit": "^2.2.5",
      "validator": "^6.1.0"
    },
    "devDependencies": {
      "babel-cli": "^6.18.0",
      "babel-core": "^6.20.0",
      "babel-plugin-add-module-exports": "^0.2.1",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-es2016": "^6.16.0",
      "babel-preset-latest": "^6.16.0",
      "babel-preset-stage-2": "^6.18.0",
      "babel-register": "^6.18.0",
      "browser-sync": "^2.18.2",
      "chai": "^3.5.0",
      "eslint": "^3.12.0",
      "eslint-config-airbnb-base": "^10.0.1",
      "eslint-plugin-import": "^2.2.0",
      "eslint-watch": "^2.1.14",
      "gulp": "^3.9.1",
      "gulp-babel": "^6.1.2",
      "gulp-load-plugins": "^1.4.0",
      "gulp-newer": "^1.3.0",
      "gulp-nodemon": "^2.2.1",
      "gulp-sourcemaps": "^1.9.1",
      "gulp-util": "^3.0.7",
      "mocha": "^3.1.2",
      "sinon": "^1.17.6",
      "sinon-mongoose": "^1.3.0",
      "supertest": "^2.0.1"
    },
  }
  </code></pre>
  
  <p>Gulpfile.babel.js: </p>
  
  <pre><code>import gulp from 'gulp';
  import nodemon from 'gulp-nodemon';
  import sass from 'gulp-sass';
  import autoprefixer from 'gulp-autoprefixer';
  import sourcemaps from 'gulp-sourcemaps';
  import browserSync from 'browser-sync';
  const paths = {
    js: ['./**/*.js', '!dist/**', '!node_modules/**', '!coverage/**'],
    nonJs: ['./package.json', './.gitignore'],
    tests: './server/tests/*.js'
  };
  
  // Clean up dist and coverage directory
  gulp.task('clean', () =&gt;
    del(['dist/**', 'coverage/**', '!dist', '!coverage'])
  );
  
  // Copy non-js files to dist
  gulp.task('copy', () =&gt;
    gulp.src(paths.nonJs)
      .pipe(plugins.newer('dist'))
      .pipe(gulp.dest('dist'))
  );
  
  // Compile ES6 to ES5 and copy to dist
  gulp.task('babel', () =&gt;
    gulp.src([...paths.js, '!gulpfile.babel.js'], { base: '.' })
      .pipe(plugins.newer('dist'))
      .pipe(plugins.sourcemaps.init())
      .pipe(plugins.babel())
      .pipe(plugins.sourcemaps.write('.', {
        includeContent: false,
        sourceRoot(file) {
          return path.relative(file.path, __dirname);
        }
      }))
      .pipe(gulp.dest('dist'))
  );
  
  // Start server with restart on file changes
  gulp.task('nodemon', ['copy', 'babel'], () =&gt;
    plugins.nodemon({
      script: path.join('dist', 'index.js'),
      ext: 'js',
      ignore: ['node_modules/**/*.js', 'dist/**/*.js'],
      tasks: ['copy', 'babel']
    })
  );
  
  // gulp serve for development
  gulp.task('serve', ['clean'], () =&gt; runSequence('nodemon'));
  
  // default task: clean dist, compile js files and copy non-js files.
  gulp.task('default', ['clean'], () =&gt; {
    runSequence(
      ['copy', 'babel']
    );
  });
  </code></pre>
  
  <p>I have setup .babelrc file correctly too. Running <code>gulp serve</code> gives error towards the es6 <code>import</code> keyword. What should I do?</p>
  
  <p>Error: </p>
  
  <pre><code>[16:37:37] Requiring external module babel-register
  /home/cortana/Projects/JSProjects/express-boilerplate/gulpfile.babel.js:1
  (function (exports, require, module, __filename, __dirname) { import gulp from 'gulp';
                                                                ^^^^^^
  SyntaxError: Unexpected token import
      at Object.exports.runInThisContext (vm.js:76:16)
      at Module._compile (module.js:542:28)
      at loader (/home/cortana/Projects/JSProjects/express-boilerplate/node_modules/babel-register/lib/node.js:144:5)
      at Object.require.extensions.(anonymous function) [as .js] (/home/cortana/Projects/JSProjects/express-boilerplate/node_modules/babel-register/lib/node.js:154:7)
      at Module.load (module.js:487:32)
      at tryModuleLoad (module.js:446:12)
      at Function.Module._load (module.js:438:3)
      at Module.require (module.js:497:17)
      at require (internal/module.js:20:19)
      at Liftoff.handleArguments (/usr/lib/node_modules/gulp/bin/gulp.js:116:3)
  </code></pre>
  
  <p>.babelrc: </p>
  
  <pre><code>{
    "presets": ["es2016", "stage-2"],
    "plugins": ["add-module-exports"],
    "env": {
      "production": {
        "presets": ["react-optimize"],
        "plugins": ["babel-plugin-dev-expression"]
      },
      "development": {
        "presets": []
      },
      "test": {
        "plugins": [
          ["webpack-loaders", { "config": "webpack/webpack.config.test.js", "verbose": false }]
        ]
      }
    }
  }
  </code></pre>