我正在使用Gulp编译并缩小我的SASS。效果很好,但我想通过使用BrowserSync扩展自动化。
我已按照一些教程网站上的说明进行操作,但无法正常工作-更新.scss或.html文件时,浏览器不会刷新,并且不会在终端上显示任何错误。
我的gulpfile.js就这样。谁知道为什么browserSync无法运行?
(运行gulp browserSync
的ps成功使用http://localhost:3000/
打开了浏览器窗口和索引文件,但是没有自动刷新。
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const browserSync = require('browser-sync').create();
// Normal .scss compilation
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
return gulp.src('dist/css/main.css')
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))
gulp.task('watch', function(){
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
gulp.watch("*.html").on('change', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './'
},
})
})
您的监视任务应该是您的默认任务。尝试将browserSync.init()放入监视任务und中,然后使用[gulp watch
]
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const browserSync = require('browser-sync').create();
// Normal .scss compilation
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
return gulp.src('dist/css/main.css')
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))
gulp.task('watch', function(){
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
gulp.watch("*.html").on('change', browserSync.reload);
});