本文介绍了Gulp + Webpack 还是只是 Webpack?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我看到人们使用 gulp 和 webpack.但是后来我看了webpack可以代替gulp?我在这里完全糊涂了...有人可以解释一下吗?

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

更新

最后我从 gulp 开始.我是现代前端的新手,只想快速启动和运行.一年多后,我的脚已经湿透了,我准备转向 webpack.我建议那些从同一双鞋开始的人走同样的路线.不是说你不能尝试 webpack,而是说如果它看起来很复杂,首先从 gulp 开始......这没有错.

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.

如果您不想要 gulp,是的,有 grunt,但您也可以在 package.json 中指定命令并从命令行调用它们而无需任务运行器,只是为了启动并开始运行.例如:

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"
    },

推荐答案

这个答案可能会有所帮助.任务运行程序(Gulp、Grunt 等))和捆绑程序(Webpack、Browserify).为什么要一起使用?

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

...这是在 gulp 任务中使用 webpack 的示例.这更进一步,并假设您的 webpack 配置是用 es6 编写的.

...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();
            }
        }
    }
}

我想您会发现,随着您的应用程序变得越来越复杂,您可能希望按照上面的示例将 gulp 与 webpack 任务一起使用.这允许你在你的构建中做一些 webpack 加载器和插件真正不做的更有趣的事情,即.创建输出目录、启动服务器等.好吧,简而言之,webpack 实际上可以做这些事情,但你可能会发现它们对于你的长期需求是有限的.从 gulp -> webpack 获得的最大优势之一是,您可以为不同的环境自定义 webpack 配置,并让 gulp 在正确的时间完成正确的任务.这完全取决于你,但从 gulp 运行 webpack 并没有什么问题,实际上有一些漂亮的 有趣 示例.上面的例子基本上来自jlong​​ster.

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 还是只是 Webpack?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 06:21
查看更多