关于vue构建工具使用gulp结合webpack的问题

Question

同事有个小小的需求：想结合gulp和webpack构建vue脚手架。
于是我便去找资料。（苦于没找到demo）
最开始是这样的：

如上图，那gulp发挥了啥作用？启动作用？

后来，看到某篇文章：不推荐webpack-stream方案
原文地址：想要设计gulp & webpack构建系统？看这儿！

使用webpack-stream虽然可以很方便的将webpack整合到gulp中，但是有致命的问题存在：
如果关闭webpack的监听模式，那么每次文件变动就会全量编译JS/CSS文件，非常耗时。
如果打开webpack的监听模式，那么会阻塞其他gulp任务，导致其他gulp任务的监听失效。
所以这种方案几乎不可用！使用webpack-stream虽然可以很方便的将webpack整合到gulp中，但是有致命的问题存在：
如果关闭webpack的监听模式，那么每次文件变动就会全量编译JS/CSS文件，非常耗时。
如果打开webpack的监听模式，那么会阻塞其他gulp任务，导致其他gulp任务的监听失效。 所以这种方案几乎不可用！

附webpack-stream地址：https://github.com/shama/webp...

奈何没有demo 感觉无从下手，官方文档也没看懂，USAGE WITH GULP
求大神解读：官方源码地址

var gulp = require("gulp");
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");

// The development server (the recommended option for development)
gulp.task("default", ["webpack-dev-server"]);

// Build and watch cycle (another option for development)
// Advantage: No server required, can run app from filesystem
// Disadvantage: Requests are not blocked until bundle is available,
//               can serve an old app on refresh
gulp.task("build-dev", ["webpack:build-dev"], function() {
    gulp.watch(["app/**/*"], ["webpack:build-dev"]);
});

// Production build
gulp.task("build", ["webpack:build"]);

gulp.task("webpack:build", function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.plugins = myConfig.plugins.concat(
        new webpack.DefinePlugin({
            "process.env": {
                // This has effect on the react lib size
                "NODE_ENV": JSON.stringify("production")
            }
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    );

    // run webpack
    webpack(myConfig, function(err, stats) {
        if(err) throw new gutil.PluginError("webpack:build", err);
        gutil.log("[webpack:build]", stats.toString({
            colors: true
        }));
        callback();
    });
});

// modify some webpack config options
var myDevConfig = Object.create(webpackConfig);
myDevConfig.devtool = "sourcemap";
myDevConfig.debug = true;

// create a single instance of the compiler to allow caching
var devCompiler = webpack(myDevConfig);

gulp.task("webpack:build-dev", function(callback) {
    // run webpack
    devCompiler.run(function(err, stats) {
        if(err) throw new gutil.PluginError("webpack:build-dev", err);
        gutil.log("[webpack:build-dev]", stats.toString({
            colors: true
        }));
        callback();
    });
});

gulp.task("webpack-dev-server", function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = "eval";
    myConfig.debug = true;

    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        publicPath: "/" + myConfig.output.publicPath,
        stats: {
            colors: true
        }
    }).listen(8080, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
    });
});

Answer 1

原始需求应当是【构建脚手架】，而不应当是【Gulp + Webpack 构建脚手架】。

如果非常必要，类似的 Gulpfile 示例可以参考这个：
https://github.com/doodlewind...

实际上 Webpack 并没有需要配合 Gulp 才能实现的功能，结合 NPM Script 是更简单的选择。