BrowserSync 不会使用 gulp-jade 自动刷新页面答案

【问题标题】：BrowserSync does not automatically refresh the page with gulp-jadeBrowserSync 不会使用 gulp-jade 自动刷新页面
【发布时间】：2017-10-28 13:10:21
【问题描述】：

我最近用 gulp 创建了一个工作区。一切正常（自动重新加载、sass 编译、缩小等）你可以在github看到代码

今天我想在项目中添加翡翠。编译效果很好，但是 browserSync 不会自动刷新页面

这是我的代码

'use strict'

var gulp = require('gulp')
var jade = require('gulp-jade')
var sass = require('gulp-sass')
var cssmin = require('gulp-cssmin')
var rename = require('gulp-rename')
var prefix = require('gulp-autoprefixer')
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')
var imagemin = require('gulp-imagemin')
var browserSync = require('browser-sync').create()

// Compile Jade
gulp.task('jade', function () {
  gulp.src('src/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('./dist'))
})

// Configure CSS tasks.
gulp.task('sass', function () {
  gulp.src('src/scss/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(prefix('last 2 versions'))
    .pipe(cssmin())
    .pipe(concat('styles.css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream())
})

// Configure JS.
gulp.task('js', function () {
  gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(concat('app.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist/js'))
    .pipe(browserSync.stream())
})

// Configure image stuff.
gulp.task('images', function () {
  gulp.src('src/img/**/*.+(png|jpg|gif|svg)')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'))
    .pipe(browserSync.stream())
})

gulp.task('default', ['jade', 'sass', 'js', 'images'], function () {
  browserSync.init({
    server: './dist'
  })

  gulp.watch('src/*.jade', ['jade'])
  gulp.watch('src/scss/**/*.scss', ['sass'])
  gulp.watch('src/js/**/*.js', ['js'])
  gulp.watch('./dist/*.html').on('change', browserSync.reload)
})

【问题讨论】：

玉任务中缺少.pipe(browserSync.stream())
即使有这一行，页面也不会自行刷新。这是命令提示符prntscr.com/h346rs 中的输出
所以如果我正确理解了jade，它正在输出你希望重新加载的html？我会尝试 browserSync.reload() 而不是 stream()。但问题是它为什么不触发 html 文件的 gulp.watch 呢？ [你最终会想要你所有任务的 return 语句，但这不应该是你的问题 - 但试着把一个放在 'jade' ala return gulp.src ....]
我在github上更新了代码，但什么也没发生

标签： javascript node.js gulp pug browser-sync

【解决方案1】：

我测试了代码并发现了错误。 Browsersync 被注入到<head> 元素中，因此您需要在页面上拥有该元素（拥有 html/head/body 仍然很好）。实施我的评论建议（关于缺少 browserSync.stream()）并将您的翡翠文件修复为：

html
  head
  body
    h1 hello Jade

    ul
      li comment ça va
      li et toi ?

    .box salut comment tu vas ?

解决问题。 BrowserSync 现在可以正确插入到页面中:)

【讨论】：