KonishiLee's Blog

Browser-sync gulp 配置

Browsersync 是一个前端调试的利器,它能够让你在页面文件改动之后自动刷新浏览器,从而方便了前端的调试工作。

本文就是对于 Browsersync + Gulp 的配置作个简单的笔记。

因为使用Gulp的话,相比起来使用Browser-sync自带的命令行简单点。而且有更多的选择。

首先安装 Browsersync 与 Gulp:

1
npm install browser-sync gulp --save-dev

在 gulpfile.js 中创建新任务:

文件都放在APP中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = {
baseDir: 'app',
watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ]
}
gulp.task('server', function() {
browserSync.init({
files: config.watchFiles,
server: {
baseDir: config.baseDir
}
});
})
gulp.task('default',['server']); //定义默认任务

这里表示以 app 目录作为根目录启动 HTTP 服务,并监听 app 目录下的所有 html、css 以及 js 类型的文件,当这些文件有改动时 Browsersync 会自动刷新浏览器页面。

如果想配合使用 SASS 之类的。参考

需要监听任务只需要打开命令行,输入gulp即可。

实践了一番:使用SASS和JS压缩命令行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// var browserify = require('browserify');
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var reload = browserSync.reload;
var config = {
baseDir: 'app',
watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ]
}
gulp.task('server',['sass'], function() {
browserSync.init({
files: config.watchFiles,
server: {
baseDir: config.baseDir
}
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/script/*.js", ['js-watch']);
gulp.watch("app/*.html").on('change', reload);
})
// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(reload({stream: true}));
});
// 处理完JS文件后返回流
gulp.task('js', function () {
return gulp.src('app/script/*.js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('app/js'));
});
// 创建一个任务确保JS任务完成之前能够继续响应
// 浏览器重载
gulp.task('js-watch', ['js'], browserSync.reload);
gulp.task('default',['server']); //定义默认任务
如果喜欢这个分享,就帮忙买杯咖啡吧