对将 gulp 和 webpack 与 watch 结合使用感到困惑答案

【问题标题】：Confused with combining gulp and webpack with watch对将 gulp 和 webpack 与 watch 结合使用感到困惑
【发布时间】：2016-02-23 12:39:02
【问题描述】：

我正在尝试创建一个允许我编译 scss 和 js 文件的 gulpfile。

从 gulp 任务调用 webpack 似乎按预期工作（只需遵循 webpack-stream intro。

但是，我无法设置监视文件。它对 scss 文件按预期工作，但不适用于 webpack 编译。它在启动时发生一次，阻塞控制台，但不会重新编译文件。

这是我的 gulpfile：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var webpackConfig = require('./webpack.config.js');
var webpack = require('webpack-stream');

gulp.task('default', function () {
    // place code for your default task here
});

gulp.task('watch', ['sass:watch','webpack:watch']);

gulp.task('sass', function () {
    return gulp.src('./Styles/**/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass().on('error', sass.logError))
      .pipe(sourcemaps.write(".",{ ext: '.map' }))
      .pipe(gulp.dest('./wwwroot/styles'));
});

gulp.task('sass:watch', function () {
    gulp.watch('./Styles/**/*.scss', ['sass']);
});

gulp.task('webpack', function(){
    return gulp.src('App/entry.js')
        .pipe(webpack( webpackConfig ))
        .pipe(gulp.dest('./'));
});

gulp.task('webpack:watch', function(){
    var watch = Object.create(webpackConfig);
    watch.watch = true;
    return gulp.src('App/entry.js')
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('./'));
});

当我运行 gulp watch 时，我会得到以下输出：

c:\Data\projets\someproject>gulp watch
[13:30:18] Using gulpfile c:\Data\projets\someproject\gulpfile.js
[13:30:18] Starting 'sass:watch'...
[13:30:18] Finished 'sass:watch' after 13 ms
[13:30:18] Starting 'webpack:watch'...
[13:30:22] Version: webpack 1.12.13
                       Asset    Size  Chunks             Chunk Names
    ./wwwroot/dist/bundle.js  498 kB       0  [emitted]  main
./wwwroot/dist/bundle.js.map  616 kB       0  [emitted]  main
[13:30:22] Finished 'webpack:watch' after 3.92 s
[13:30:22] Starting 'watch'...
[13:30:22] Finished 'watch' after 11 µs

但是，即使控制台没有返回提示，如果我更新源，也不会更新捆绑文件。

我不认为问题出在我的 webpack.config.js 文件中。如果我在提示符中运行webpack --watch --color --progress，我会在文件被修改时看到重新编译的包。

感谢您的澄清，我正在努力学习 javascript 生态系统 :)

【问题讨论】：

我正在处理同样的问题，目前使用 webpack entry.js bundle.js，似乎是最好和最简单的方法或添加 - w 进入 观看模式
我同意麦克布利的观点。我在结合 gulp 和 webpack 两者时遇到了很多问题。

标签： gulp webpack

【解决方案1】：

在你的控制台输出中，如果你做的一切都正确，你应该得到“webpack 正在监视变化”。您已将 watch.watch 设置为 true，但在下一步中您引用了旧的 webpackConfig，其 watch 参数不正确。你应该使用：

return gulp.src('App/entry.js')
        .pipe(webpack(watch))
        .pipe(gulp.dest('./'));

在此更改之后它起作用了，并且 gulp watch 轮询这两个更改。您还将在控制台中看到“webpack 正在监视更改”。我希望这能解决问题。

【讨论】：