BrowserSync不會使用gulp-jade自動刷新頁面

Question

我最近用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)
})

Answer 1

我測試了代碼，發現了錯誤。 Browsersync被注入到<head>元素中，因此您需要在頁面上具有該元素（具有html / head / body仍然很好）。 從評論中實現我的建議（關於丟失的browserSync.stream（））並將您的Jade文件修復為：

html
  head
  body
    h1 hello Jade

    ul
      li comment ça va
      li et toi ?

    .box salut comment tu vas ?

解決問題。 現在，BrowserSync正確地插入了頁面：)

BrowserSync不會使用gulp-jade自動刷新頁面

問題描述

1 個解決方案

解決方案1
0 已采納 2017-10-28 14:39:32

BrowserSync不會使用gulp-jade自動刷新頁面

問題描述

1 個解決方案

解決方案1 0 已采納 2017-10-28 14:39:32

解決方案1
0 已采納 2017-10-28 14:39:32