Gulp v4 不更新浏览器

Question

当我启动时 gulp Google Chrome 没有打开我的 http://localhost:3000 并且没有自动更新我的 css 文件。我不知道我做错了什么。

这是我第一次使用 Gulp，伙计们。有什么办法解决吗？谢谢

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

//compile sass
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream())
})

//move js to src/js
gulp.task('js', function(){
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js',
    'node_modules/popper.js/dist/umd/popper.min.js'])
    .pipe(gulp.dest("src/js"))
    .pipe(browserSync.stream())
})

//gulp html and scss
gulp.task('serve', gulp.parallel('sass'), function(){
    browserSync.init({
        server: "./src"
    })

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
    gulp.watch("src/*.html").on('change', browserSync.reload)
})

gulp.task('default', gulp.series('js', 'serve'))

Answer 1

更改此行：

gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])

到

gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'))

您的版本是 gulp v3，而不是 gulp v4。

我也会改

gulp.task('default', gulp.series('js', 'serve'))

到

gulp.task('default', gulp.series('js', 'sass', 'serve'))

以便您可以简化为：

gulp.task('serve', function(){ // 删除了 parallel 部分。

第一次运行 gulp.default 如果您已经对文件进行了一些更改，则可能需要刷新浏览器。最好先启动 default 任务，然后再更改您的文件。

Gulp v4 不更新浏览器

Gulp v4 doesn't update the browser

gulp

gulp-sass