javascript - 使用 gulp 设置配置文件。站点加载但 css 注入(inject)没有发生。我该如何解决？

Question

这是我的 gulp 配置文件。它可以正常启动服务器，我可以在浏览器中查看该站点，但保存更改只会在命令提示符中通知我，但浏览器中没有注入(inject)或更改

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;

gulp.task('browser-sync', function(){
    browserSync.init({
            proxy : 'localhost:80/shopbuddydemo'
    });
});

gulp.task('html', function(){
    gulp.src('app/*.html')
    .pipe(reload({stream:true}))
});

gulp.task('css', function(){
  gulp.src('css/*.css')
  .pipe(reload({stream:true}))
});

gulp.task('js',function(){
    gulp.src('js/*.js')
    .pipe(reload({stream:true}));
});

gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        proxy : 'localhost:80/shopDemo'
    });

    gulp.watch("*.html").on("change", reload);
    gulp.watch("css/*.css").on('change',reload);
    gulp.watch("js/*.js").on('change',reload);
});

gulp.task('watch', function(){
    gulp.watch('app/**/*.html', ['html']);
  gulp.watch('css/*.css', ['css']);
    gulp.watch('js/*.js', ['js']);
});

gulp.task('default', ['browser-sync', 'html', 'css', 'js','serve', 'watch']);

Answer 1

此语法适用于我:browserSync.stream() 而不是 reload({stream:true})。我相信后者是一个较旧的语法版本。

编辑:Link for confirmation .

此外，需要澄清的是，reload 在监视任务中仍然可以很好地工作，至少根据我的经验。例如，

const reload = browserSync.reload
gulp.watch(images.src, ['images', reload])
gulp.watch(markup.src, reload)

这是需要 browserSync.stream() 的注入(inject):

gulp.task('css', function(){
  return gulp.src('css/*.css')
    .pipe(browserSync.stream())
})

编辑#2为了进一步补充这一点，我只是浏览了源代码，从技术上讲reload({ stream : true }) should still work :

     /**
     * BACKWARDS COMPATIBILITY:
     * Passing an object as the only arg to the `reload`
     * method with at *least* the key-value pair of {stream: true},
     * was only ever used for streams support - so it's safe to check
     * for that signature here and defer to the
     * dedicated `.stream()` method instead.
     */

    if (_.isObject(opts)) {
        if (!Array.isArray(opts) && Object.keys(opts).length) {
            if (opts.stream === true) {
                return stream(emitter)(opts);
            }
        }
    }

也就是说，我在第一个答案中使用该方法仍然取得了更好的成功。