Question

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

从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，我会在修改文件时看到bundle的重新编译。

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

Answer 1

在您的控制台输出中，您应该看到网络包正在关注更改＆＃39;如果你做的一切都正确。您已将watch.watch设置为true，但在下一步中您引用了旧的webpackConfig，其watch参数不为true。你应该使用：

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

在这次改变之后它运作了，并且gulp watch对这两个变化进行了民意调查。你也会在你的控制台中看到webpack正在关注变化＆＃39;。我希望这能解决这个问题。

将gulp和webpack与手表结合在一起感到困惑

1 个答案: