Confused with combining gulp and webpack with watch

Question

I'm trying to create a gulpfile that allows me to compile scss and js files.

Calling webpack from a gulp task seems to work as expected (simply followed the webpack-stream intro.

However, I'm failing setting up watching for files. It's working as expected for scss files, but not for webpack compilation. It occurs once at launch, block the console, but does not recompile files.

Here is my 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('./'));
});

When I run gulp watch, I get this output:

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

However, even if the console does not returns to the prompt, no bundle file is updated, if I update my sources.

I don't believe the issue is in my webpack.config.js file. If I run webpack --watch --color --progress in the prompt, I see the recompilation of bundle whenever a file is modified.

Thanks for clarification, I'm learning javascript ecosystem the hard way :)

I'm dealing with the same problem, for now using webpack entry.js bundle.js, seems to be the best and most simple way or adding -w to it for watch mode — McBooley
I agree with McBooley. I ran into many problems combining the two, gulp and webpack. — aventic

Sachin Kumar Sachin Kumar · Accepted Answer · 2016-06-20T07:34:13

In your console output, you should get 'webpack is watching for changes' if you do everything correctly. You have set watch.watch to true, but in the next step you have referenced to the old webpackConfig, for which the watch parameter is not true. You should use:

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

It worked after this change and the gulp watch polls for both the changes. You will also see in your console 'webpack is watching for changes'. I hope this solves the issue.

Confused with combining gulp and webpack with watch

1 Answers