Question

当我启动时，谷歌浏览器不会打开我的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不会更新浏览器

1 个答案: