Question

我的观察任务如下：

const select = {
   js: './src/components/**/*.js',
   scss: [
    './src/global/**/*.scss',
    './src/components/**/*.scss'
  ],
  html: [
    './src/components/**/*.cshtml',
    './src/components/**/*.html'
  ]
};

gulp.task('watch', () => {
  gulp.watch(select.js, ['scripts']);
  gulp.watch(select.scss, ['styles']);
  gulp.watch(select.cshtml, ['views']);
});

我的风格任务就像：

const scssForCompile = [
  './src/global/scss/style.scss'
];

gulp.task('styles', () => {
  return gulp.src(scssForCompile)
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cleancss())
    .pipe(gulp.dest('./build/styles'))
    .pipe(browsersync.reload({stream: true}));
});

请注意scssForCompile与select.scss不同。每次我编辑任何文件时，相关的资产文件都会更新 - 到目前为止没问题。唯一的问题是，每次我的资产文件都得到更新时，我都不会重新加载。

我假设

.pipe(browsersync.reload({stream: true}));

应该做的伎俩，但事实并非如此。当我的资产文件更新时，有人可以帮助使用browserify重新加载页面吗？

code on git hub

Answer 1

问题是您正在使用browsersync的两个不同实例。

在 tasks / styles.js 中，您需要默认实例：

const browsersync = require('browser-sync');

但是在 tasks / server.js 中，您使用create()创建新实例：

const browsersync = require('browser-sync').create();

因此，当您在 tasks / styles.js 中执行.pipe(browsersync.reload({stream: true}))时，您尝试通知实际上未运行的browsersync实例。

您需要更改 tasks / server.js 以使用默认实例：

const browsersync = require('browser-sync');

浏览器同步不会在监视任务完成时重新加载页面

1 个答案: