gulp 添加浏览器同步后手表无法正常工作
gulp watch not working when browsersync is added
我尝试获得一个简单的工作流程 运行,其中 sass 文件中的更改会立即转换为 css 并显示在浏览器中(使用本教程:https://css-tricks.com/gulp-for-beginners/)
我在这里查看了类似问题的多个答案,但找不到解决方案。
这是我的 gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('app/**/*.sass') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
当我调用 gulp sass
时,它工作得很好。此外,当我删除 browsersync 并仅使用以下代码时,观看本身有效:
gulp.task('watch', function(){
gulp.watch('app/scss/*.sass', gulp.series(['sass']));
})
浏览器同步(未)发生的方式一定有问题。有人可以帮我吗?非常感谢!
以下不在 gulp v4 语法中:
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
将函数移动到 series
个参数中。所以试试这个:
gulp.task('watch', gulp.series('browserSync', 'sass', function(){
gulp.watch('app/**/*.sass', gulp.series('sass'));
}));
这样 gulp.task()
接受 2 个参数而不是 3 个 - 这就是 gulp v4 方式。不幸的是,那篇文章是用 v3 语法写的,有一些警告要更改 v4 的代码。
我尝试获得一个简单的工作流程 运行,其中 sass 文件中的更改会立即转换为 css 并显示在浏览器中(使用本教程:https://css-tricks.com/gulp-for-beginners/) 我在这里查看了类似问题的多个答案,但找不到解决方案。
这是我的 gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('app/**/*.sass') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
当我调用 gulp sass
时,它工作得很好。此外,当我删除 browsersync 并仅使用以下代码时,观看本身有效:
gulp.task('watch', function(){
gulp.watch('app/scss/*.sass', gulp.series(['sass']));
})
浏览器同步(未)发生的方式一定有问题。有人可以帮我吗?非常感谢!
以下不在 gulp v4 语法中:
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
将函数移动到 series
个参数中。所以试试这个:
gulp.task('watch', gulp.series('browserSync', 'sass', function(){
gulp.watch('app/**/*.sass', gulp.series('sass'));
}));
这样 gulp.task()
接受 2 个参数而不是 3 个 - 这就是 gulp v4 方式。不幸的是,那篇文章是用 v3 语法写的,有一些警告要更改 v4 的代码。