BabelとWebpackでGulpをセットアップする方法

Question

nodejsアプリケーションを作成していますが、これはモジュール読み込み（インポート）機能をサポートしていないため、これを行うにはbabel/webpackを使用したいと思います。

誰かが私はこれを設定助けることができるので、それは私のサーバーを実行して、単に "がぶ飲み" を実行して、変更のためにすべて、チェックをコンパイル

ガルプ：

var gulp  = require('gulp'); 
var nodemon = require('gulp-nodemon'); 
var notify  = require('gulp-notify'); 
var livereload = require('gulp-livereload'); 
var webpack = require('webpack-stream'); 

gulp.task('es6',() => { 

    return gulp.src('index.js') 
       .pipe(webpack(require('./webpack.config.js'))); 
}); 

gulp.task('listen',() => { 

    livereload.listen(); 

    nodemon({ 
     script: 'index.js', 
     ext: 'js' 
    }).on('restart',() => { 
     gulp.src('index.js') 
      .pipe(livereload()) 
      .pipe(notify('Reloading page, please wait...')); 
    }); 

}); 

gulp.task('default', ['es6', 'listen'],() => { 
}); 

のWebPACK：

module: { 
    loaders: [ 
     { 
      test: /\.js$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel', // 'babel-loader' is also a legal name to reference 
      query: { 
       presets: ['es2015'] 
      } 
     } 
    ] 
} 

Answer 1

このレポジトリをチェックアウト私はあなたのための例を作成しました。

https://github.com/synthecypher/babel-gulp-webpack

const gulp    = require('gulp'); 
const gutil   = require('gulp-util'); 
const webpack   = require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 

// webpack-dev-server will build files and serve them from memory (no files written to disk). 
gulp.task('default', (callback) => { 
    let config = require('./webpack.config'); 
    config.entry.app.unshift(`webpack-dev-server/client?http://${config.devServer.host}:${config.devServer.port}/`); 
    new WebpackDevServer(new webpack(config), config.devServer) 
    .listen(config.devServer.port, config.devServer.host, (err) => { 
     if (err) throw new gutil.PluginError('webpack-dev-server', err); 
     gutil.log(gutil.colors.cyan(`http://${config.devServer.host}:${config.devServer.port}`)); 
    }); 
}); 

// output will be built to the `dist` folder. 
gulp.task('build', (callback) => { 
    let config = require('./webpack.config.js'); 
    webpack(config, (err, stats) => { 
    if (err) throw new gutil.PluginError("webpack", err); 
    stats.toString(config.devServer.stats).split('\n').map((line) => { 
     gutil.log(gutil.colors.blue("[webpack]"), line); 
    }); 
    callback(); 
    }); 
});