SASS更新时,浏览器同步不适用于gulp [英] Browser sync not working with gulp when SASS updated
本文介绍了SASS更新时,浏览器同步不适用于gulp的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个带有浏览器同步运行和js/sass编译的gulpfile.它为我的Angular SPA服务.看起来像这样:
I have a gulpfile with browser sync running and js/sass compiling. It serves my Angular SPA. It looks like this:
gulp.task('default', function(){
return runSequence(['build-css', 'build-js'], 'serve-dev');
});
gulp.task('serve-dev', function() {
browserSync.init(null, {
server: {
baseDir: './',
middleware: [
modRewrite([
'!\\.\\w+$ /index.html [L]'
])
]
}
});
gulp.watch(paths.js.dir + '/**/*.js', ['watch-js']);
gulp.watch(paths.css.dir + '/**/*.scss', ['watch-css']);
gulp.watch(paths.html.dir + '/**/*.html').on('change', browserSync.reload);
});
gulp.task('watch-css', ['build-css'], browserSync.reload);
gulp.task('watch-js', ['build-js'], browserSync.reload);
gulp.task('build-css', function() {
return gulp.src(paths.css.src)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['> 0.5%']
}))
.pipe(cleanCSS())
.pipe(rename('app.min.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css.dest));
});
gulp.task('build-js', function() {
return gulp.src(paths.js.src)
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.js.dest));
});
最初它可以为网站提供服务,当我更新html文件时,它会刷新,但是当我更新SASS文件时,它不会刷新.所有路径绝对正确,因为初始编译可以正常工作.
It works initially to serve the site, and when I update html files it refreshes, however when I update a SASS file it doesn't refresh. All the paths are definitely correct because the initial compiling works fine.
推荐答案
添加
.pipe(browserSync.stream())
.pipe(browserSync.stream())
在"build-css"任务的末尾.它对我有用
at the end of 'build-css' task. It worked for me
这篇关于SASS更新时,浏览器同步不适用于gulp的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文