Gulp v4 不更新浏览器答案

【问题标题】：Gulp v4 doesn't update the browserGulp v4 不更新浏览器
【发布时间】：2019-12-12 23:01:24
【问题描述】：

当我开始 gulp 时，谷歌浏览器不会打开我的 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'))

【问题讨论】：

标签： gulp gulp-sass

【解决方案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 任务，然后再更改您的文件。

【讨论】：