Question

我正在尝试使用browserSync来处理Polymer应用程序的监视任务。这是我的gulp文件：

function source() {
  return project.splitSource()
    .pipe(gulpif('**/*.html', html.lint())).on('end', log('Linted HTML'))
    .pipe(gulpif('**/*.html', html.minify())).on('end', log('Minified HTML'))

    .pipe(gulpif('**/*.js', javascript.minify())).on('end', log('Minified Javascript'))
      .pipe(gulpif('**/*.js', javascript.babelify())).on('end', log('Transpiled Javascript'))
      .pipe(gulpif('**/*.{gif,jpg,svg}', images.minify())).on('end', log('Minified Images'))

    .pipe(project.rejoin()); // Call rejoin when you're finished
}


function dependencies() {
  return project.splitDependencies()
    .pipe(project.rejoin());
}

gulp.task('default', gulp.series([
  clean.build,
  project.merge(source, dependencies),
  project.serviceWorker
]));

gulp.task('reload', function(){
  browserSync.reload();
} );

gulp.task('dev',  gulp.series(
  project.merge(source, dependencies)
 ));

gulp.task('browser-sync', function(){
  return new Promise(function(resolve){
    resolve( browserSync({
      port: 5000,
      notify: false,
      logPrefix: 'PSK',
      snippetOptions: {
        rule: {
          match: '<span id="browser-sync-binding"></span>',
          fn: function(snippet) {
            return snippet;
          }
        }
      },

      server: {
        baseDir: ['./'],
      }
    })
    )
  });
})
gulp.task('watch', function(){
  gulp.watch(['**/*.html'], gulp.series('dev','reload'));
  gulp.watch(['**/*.js'], gulp.series('dev', 'reload'));
});

gulp.task('serve',
  gulp.series(
      'dev',
      gulp.parallel('browser-sync','watch')), function(){
      return gulp.src('**/*.html', {passthrough:true})
    }
);

project.splitSource是一个聚合物入门套件特定功能，可将Web组件拆分为单独的html，css，js实体，以便您可以执行所需的任何任务。

当我运行'gulp serve'时，任务完成并且我的应用程序已投放。

一旦我更改了文件的内容，手表就会运行“dev”任务并尝试运行重新加载任务，以及崩溃的位置。以下是整个过程的命令行消息：

→ gulp serve
[08:53:43] Using gulpfile ~/Documents/Projects/unicef/etools-dashboard/gulpfile.js
[08:53:43] Starting 'serve'...
[08:53:43] Starting 'dev'...
[08:53:43] Starting 'output'...
[08:55:20] Linted HTML
[08:55:20] Minified HTML
[08:55:20] Minified CSS
[08:55:20] Minified Javascript
[08:55:20] Transpiled Javascript
[08:55:20] gulp-imagemin: Minified 511 images (saved 212 kB - 3.1%)
[08:55:20] Minified Images
[08:55:29] Finished 'output' after 1.75 min
[08:55:29] Finished 'dev' after 1.75 min
[08:55:29] Starting 'browser-sync'...
[08:55:29] Starting 'watch'...
[08:55:30] Finished 'browser-sync' after 551 ms
[PSK] Access URLs:
 --------------------------------------
       Local: http://localhost:5000
    External: http://192.168.0.102:5000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.102:3001
 --------------------------------------
[PSK] Serving files from: ./
[08:56:20] Starting 'dev'...
[08:56:20] Starting 'output'...
[08:56:20] Finished 'output' after 288 ms
[08:56:20] Finished 'dev' after 290 ms
[08:56:20] Starting 'reload'...
[PSK] Reloading Browsers...
Error: write after end
    at writeAfterEnd (_stream_writable.js:159:12)
    at StreamAnalyzer.Writable.write (_stream_writable.js:204:5)
    at PassThrough.ondata (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:546:20)
    at emitOne (events.js:77:13)
    at PassThrough.emit (events.js:169:7)
    at readableAddChunk (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:217:18)
    at PassThrough.Readable.push (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:176:10)
    at PassThrough.Transform.push (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:123:32)
    at afterTransform (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:79:51)
    at TransformState.afterTransform (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:58:12)
[08:56:21] The following tasks did not complete: serve, <parallel>, watch, <series>, reload
[08:56:21] Did you forget to signal async completion?

知道重装导致崩溃的原因吗？我用谷歌搜索了这个“写完后”，似乎需要返回流或异步动作需要一个明确的完成cb，但我不知道如何用gulp 4做这个。任何建议都会有很大的帮助。

BrowserSync.reload在gulp任务

0 个答案: