Gulp + Webpack还是JUST Webpack？ [英] Gulp + Webpack or JUST Webpack?

问题描述

我看到有人用webpack使用gulp。但后来我读webpack可以取代吞咽？我在这里完全困惑...有人可以解释吗？

更新

到最后我开始一饮而尽。我对现代前端很陌生，只是想快速起床并跑步。现在我已经有一年多的时间了，我已经准备好转移到webpack了。对于以同样的鞋子开始的人，我建议同样的路线。不要说你不能尝试webpack，但只是说，如果看起来复杂，先从大口饮料开始......没有什么错的。

如果你不想喝酒，没错，但你也可以在你的package.json中指定命令，并从命令行调用它们，而不需要任务运行器来启动和运行。例如：

 scripts：{
babel：babel src -d build，
browserify：browserify build / client / app.js -o dist / client / scripts / app.bundle.js，
build：npm run clean&& npm run babel& amp; amp; npm ;& npm run prepare& npm run browserify，
clean：rm -rf build& rm -rf dist，
copy：server：cp build / server.js dist / server.js，
copy：index：cp src / client / index.html dist / client / index.html，
copy：npm运行拷贝：服务器& npm运行拷贝：索引，
准备：mkdir -p dist / client / scripts /&&npm run copy，
start： node dist / server
}，
  

解决方案

这个答案可能有帮助。 任务跑步者（吞食，咕噜等） ）和Bundlers（Webpack，Browserify）。为什么一起使用？

...以下是一个使用webpack从一个gulp任务中的例子。这更进一步，并假设你的webpack配置是用es6编写的。

  var gulp = require（'gulp'）; 
 var webpack = require（'webpack'）; 
 var gutil = require（'gutil'）; 
 var babel = require（'babel / register'）; 
 var config = require（path.join（'../ ..'，'webpack.config.es6.js'））; 
 
 gulp.task（'webpack-es6-test'，function（done）{
 webpack（config）.run（onBuild（done））; 
}）; 
 
函数onBuild（完成）{
返回函数（err，stats）{
 if（err）{
 gutil.log（'Error'，err）; 
 if（done）{
 done（）; 
 
} else {
 Object.keys（stats.compilation.assets）.forEach（function（key）{
 gutil.log（'Webpack：output'，gutil。 colors.green（key））; 
}）; 
 gutil.log（'Webpack：'，gutil.colors.blue（'finished'，stats.compilation.name））; 
 if（done）{
 done（）; 
} 
} 
} 
} 
  

I想想你会发现，随着你的应用程序变得更加复杂，你可能想要像上面的例子一样使用一个webpack任务的gulp。这允许你在你的构建中做一些更有趣的事情，webpack加载器和插件实际上不这样做，即。创建输出目录，启动服务器等。简而言之，webpack实际上可以完成这些任务，但是您可能会发现它们仅限于长期需求。从gulp - > webpack获得的最大优势之一是，您可以针对不同的环境定制您的webpack配置，并在适当的时间做出正确的任务。它真的取决于你，但是从gulp运行webpack没什么问题，事实上有一些漂亮的有趣的如何做到这一点的例子。上面的例子基本上来自 jlong​​ster 。

I see people using gulp with webpack. But then I read webpack can replace gulp? I'm completely confused here...can someone explain?

UPDATE

in the end I started with gulp. I was new to modern front-end and just wanted to get up and running quick. Now that I've got my feet quite wet after more than a year, I'm ready to move to webpack. I suggest the same route for people who start off in the same shoes. Not saying you can't try webpack but just sayin if it seems complicated start with gulp first...nothing wrong with that.

If you don't want gulp, yes there's grunt but you could also just specify commands in your package.json and call them from the command-line without a task runner just to get up and running initially. For example:

"scripts": {
      "babel": "babel src -d build",
      "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js",
      "build": "npm run clean && npm run babel && npm run prepare && npm run browserify",
      "clean": "rm -rf build && rm -rf dist",
      "copy:server": "cp build/server.js dist/server.js",
      "copy:index": "cp src/client/index.html dist/client/index.html",
      "copy": "npm run copy:server && npm run copy:index",
      "prepare": "mkdir -p dist/client/scripts/ && npm run copy",
      "start": "node dist/server"
    },

解决方案

This answer might help. Task Runners (Gulp, Grunt, etc) and Bundlers (Webpack, Browserify). Why use together?

...and here's an example of using webpack from within a gulp task. This goes a step further and assumes that your webpack config is written in es6.

var gulp = require('gulp');
var webpack = require('webpack');
var gutil = require('gutil');
var babel = require('babel/register');
var config = require(path.join('../..', 'webpack.config.es6.js'));

gulp.task('webpack-es6-test', function(done){
   webpack(config).run(onBuild(done));
});

function onBuild(done) {
    return function(err, stats) {
        if (err) {
            gutil.log('Error', err);
            if (done) {
                done();
            }
        } else {
            Object.keys(stats.compilation.assets).forEach(function(key) {
                gutil.log('Webpack: output ', gutil.colors.green(key));
            });
            gutil.log('Webpack: ', gutil.colors.blue('finished ', stats.compilation.name));
            if (done) {
                done();
            }
        }
    }
}

I think you'll find that as your app gets more complicated, you might want to use gulp with a webpack task as per example above. This allows you to do a few more interesting things in your build that webpack loaders and plugins really don't do, ie. creating output directories, starting servers, etc. Well, to be succinct, webpack actually can do those things, but you might find them limited for your long term needs. One of the biggest advantages you get from gulp -> webpack is that you can customize your webpack config for different environments and have gulp do the right task for the right time. Its really up to you, but there's nothing wrong with running webpack from gulp, in fact there's some pretty interesting examples of how to do it. The example above is basically from jlongster.

这篇关于Gulp + Webpack还是JUST Webpack？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！