刚刚开始学习nodejs和gulp,发现gulp也是基于nodejs的,于是边看文档边自己写了一个browser-sync来实践。
browser-sync大名鼎鼎,在学习gulp之前就看过它炫酷的效果,十分想拥有。自己配置之后,前端编程就更加方便了。
以下是browser-sync的实现代码:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();// 静态服务器
var files = [ //监视的文件类型,
'**.html', //"**"是glob的语法,相当于"匹配多个字符,包括/"
'**.css',
'**.js'
];
gulp.task('browser-sync', function() { //此处复制官方源代码
browserSync.init({
files: files,
server: { baseDir: "./" }
},function(){ //此处添加cb, 以防warning: TypeError args.cb is not a function
});
});
gulp.task('watch', function () { //watch, 监视files, 是gulp常见的结构
gulp.watch(files, ['browser-sync']);
});
gulp.task('default', ['browser-sync','watch']); //default, 是gulp常见的结构