Webpack is Not Playing Nice with gulp-babel

Question

I'm building a gulp script to process my ES2015 code, eventually with react, but it's simply not working. Uglify was throwing errors. (stream.js:74 throw er; // Unhandled stream error in pipe.) Once I looked at the build it was obvious that the ES2015 code was not being converted.

Most solutions to this issue concern a missing preset. I made sure to include babel-preset-es2015. I have a .babelrc file that reads:

{
   "presets": ["es2015", "react"]
}

My `gulpfile.babel.js won't run without it.

The file I'm trying to process is very simple:

// index.js
let bobby = "bobby"
console.log(bobby + ' Drink rum.')

When it's turned into an early JavaScript, the let should be replaced by a var. Maybe there is something wrong with my gulpfile.babel.js?

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import runSequence from 'run-sequence';
import babel from 'gulp-babel';

// load all gulp-* plugins in node_modules
const plugins = gulpLoadPlugins()

gulp.task('default', () => {
  runSequence('build', 'copy:index')
})

gulp.task('build', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel())
    .pipe(plugins.webpack())
    // .pipe(plugins.uglify())
    .pipe(plugins.rename('bundle.js'))
    .pipe(gulp.dest('dist/'))
})

gulp.task('copy:index', () => {
  gulp.src('src/index.html')
    .pipe(gulp.dest('dist/'))
})

My gulp version is 3.9.1 My node version is 6.2.0

These are my dependencies so far:

  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-register": "^6.16.3",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-filter": "^4.0.0",
    "gulp-load-plugins": "^1.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "gulp-webpack": "^1.5.0",
    "react": "^15.4.0-rc.4",
    "react-dom": "^15.4.0-rc.4",
    "run-sequence": "^1.2.2",
    "webpack": "^1.13.2"
  }

UPDATE: So I went and created a separate task just for Babel and it works. When I added on uglify and rename it works, but when I add Webpack, it has problems. Obviously, Webpack isn't playing nice. Has anyone else had this kind of trouble working with Webpack and gulp?

This isn't going to fix your problem but with this simple gulpfile you could shave off a little weight (if that matters) and cruft (if you care) and a little time (would be interesting to measure) by: dropping `gulp-load-plugins` and just importing `gulp-rename` and `gulp-webpack` directly; and doing something like `gulp.task('default', ['copy:index']) ...samebuildtask... gulp.task('copy:index', ['build'], ...samerestofcopyindex...` — henry, Oct 15 '16 at 15:55
Thanks. I get that. I'm mostly playing around with these different tools, right now. — Gabriel Kunkel, Oct 15 '16 at 17:08

score 1 · Accepted Answer · edited Jan 08 '18 at 15:48

Let me ask this, do you really need webpack to play nice with gulp-babel? We know webpack plays well with babel and generally from everything that I've read thus far, webpack does not play nice with gulp. There's so many weird things going on with any of the webpack plugins. The best resource I've found thus far for getting webpack and gulp to work together is here.

My advice thus far, forget trying to get webpack and gulp to play nice together. Instead, just have gulp run webpack when you have changes to your js. Here's my set up:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },

... [other webpack things] ...

In my package.json I set up a script using cross-env to run webpack

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "wp-dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "wp-build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

now in gulp, here's my task as per the suggestion from phase2technology.com:

gulp.task('webpack', (cb) => {
  exec('npm run wp-dev', function(err, stdout, stderr){
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

Really I think the key here is to just let webpack do the bundling and use gulp to run tasks.

Webpack is Not Playing Nice with gulp-babel

1 Answers1